Как при нажатии на кнопку изменить свойства css?

@iropov · Регистрация: 02.08.2019

Студворк — интернет-сервис помощи студентам

Как при нажатии на кнопку изменить свойства css (position: sticky; )
<button onclick="clc()">Click</button>

CSS
1
2
3
4
5
.sticky {
  position: sticky;
  top: 0;
  min-height: 2em;
}

@Sat_Odessa · 02.08.2019, 14:46

А если заменить класс (или добавить)? Такой вариант не рассматривали?
На JQuery, к примеру, так:

JavaScript
1
2
3
4
5
function clc() {
$('#elementId').removeClass('sticky');
$('#elementId').addClass('stickyPressed');
...
}

@iropov · 02.08.2019, 15:14 **[ТС]**

я не знаю JQuery

@galawar · 02.08.2019, 15:15

HTML5
1
<button class="button">Click</button>

JavaScript
1
2
3
4
// jQuery
$('.button').on('click', function() {
  $(this).toggleClass('sticky');
});

@iropov · 02.08.2019, 15:36 **[ТС]**

не понимаю JQuery

Добавлено через 35 секунд
сделал, не работает

@Imperion · 02.08.2019, 15:37

Первый момент, лучше использовать стандартные теги, вместо самописных типа <button>. Тот же тег <input type="submit">
Второй момент, событие клика по кнопке отслеживается либо при помощи JavaScript, либо при помощи Php. Если не знаете ни первое, ни второе, то придется освоить для решения данной задачки. Там буквально одно условие понадобится.

@iropov · 02.08.2019, 15:49 **[ТС]**

немного знаю php
вот на джаве что получилось но не работает

CSS
1
2
3
4
5
.sticky {
position: sticky;
top: 0;
min-height: 2em;
}

JavaScript
1
2
3
function clc(){
document.getElementById(1).style.position="fixed";
}

HTML5
1
<button onclick="clc()">Click</button>

@AlexZaw · 02.08.2019, 16:14

Сообщение от Imperion

вместо самописных типа <button>

Это стандартный тег.

Сообщение от Imperion

событие клика по кнопке отслеживается либо при помощи JavaScript, либо при помощи Php

Клик по кнопке никоим образом не может отслеживаться с помощью php, так как php работает на стороне сервера.

Сообщение от iropov

сделал, не работает

jQuery то саму подключили?

Сообщение от iropov

document.getElementById(1).style.positio n="fixed";

id не может начинаться с цифры, оно конечно сработает, но будет невалидно. Да и в любом случае его нужно брать в кавычки, если это конечно не переменная.

p.s. java и javascript это разные вещи

@Imperion · 02.08.2019, 16:41

Сообщение от AlexZaw

Клик по кнопке никоим образом не может отслеживаться с помощью php, так как php работает на стороне сервера.

Если с тегом еще согласен, хотя его никто не использует в здравом уме, то с php уже рекомендую сначала разобраться, чем писать бред и вводить в заблуждение тех, кто только начинает заниматься вебом и заходит сюда.

В форме создается кнопка и отслеживается элементарно:

PHP
1
if( isset( $_POST['my_button'] ) )

В данном случае у инпута должен быть name 'my_button'.

Добавлено через 2 минуты

Сообщение от AlexZaw

jQuery то саму подключили?

Ничего, что он стандартными средствами JS получает элемент и работает с ним? Причем здесь вообще JQuery?
В JQuery элемент получается значительно проще:

JavaScript
1
$("#id").функция();

Аналогично с классом

JavaScript
1
$(".class").функция();

@novichek_1905 · 02.08.2019, 16:57

Не по теме:

Сообщение от Imperion

хотя его никто не использует в здравом уме

Добавлено через 15 минут

Сообщение от Imperion

Второй момент, событие клика по кнопке отслеживается либо при помощи JavaScript

Только при помощи JavaScript. Не вводите людей сами в заблуждение.

Сообщение от Imperion

то с php уже рекомендую сначала разобраться

Также и вам рекомендую, первая подсказка, нас не устраивает взаемодействие с сервером)

@Imperion · 02.08.2019, 17:18

novichek_1905, мда, уж. Не дай бог вам писать когда-либо сайты, нормальные программисты повесятся потом поддерживать ваше действо.

Изучайте php и только потом лезьте кого-то учить. И про эту штуку тоже почитайте:

PHP
1
if( isset( $_POST['my_button'] ) )

Полезно будет хоть что-то узнать.

Сообщение от novichek_1905

Также и вам рекомендую, первая подсказка, нас не устраивает взаимодействие с сервером)

Вас может много чего не устраивать, решение такое имеет место быть. С вами беседа окончена, говорить со стеной бесполезно.

iropov, рассмотрите следующий вариант. Добавьте вашей кнопке класс, пусть он будет называться btn. Затем подключите JQuery:

JavaScript
1
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

После чего, переходите в файл JS и там пропишите такую штуку galawar, вам все правильно подсказал:

JavaScript
1
2
3
$('.btn').on('click', function() {
  $(this).toggleClass('sticky');
});

Единственное, скрипты подключайте в самом конце кода, перед закрывающим тегом </body>

@novichek_1905 · 02.08.2019, 17:35

Сообщение от Imperion

Изучайте php и только потом лезьте кого-то учить. И про эту штуку тоже почитайте

С помощью PHP ловить клик)??? Серьёзно? Только ничего что клик происходит на клиентской стороне. Вы в курсе да, что если элемент не является элементом формы и не ссылка, то запрос придётся отправлять с помощью JS, но никак не с помощью PHP.

Сообщение от Imperion

Вас может много чего не устраивать, решение такое имеет место быть

Приведите пример кода PHP, с помощью которого будет происходит отслеживание события клика по элементу, без перезагрузки страницы, и закроем вопрос)

@Imperion · 02.08.2019, 17:42

Сообщение от novichek_1905

Приведите пример кода PHP, с помощью которого будет происходит отслеживание события клика по элементу, без перезагрузки страницы, и закроем вопрос)

Ajax знаем, что такое? Или до этого места еще недогуглили, потому что слишком сложно? Клик на клиентской стороне вааааау!

Еще раз объясняю, изучайте это:

PHP
1
if( isset( $_POST['my_button'] ) )

Сообщение от novichek_1905

С помощью PHP ловить клик)??? Серьёзно?

Да, серьезно!!!! Формы тоже отправляете через JS? Тогда это клиника. Проверку тех же введенных данных можно проверять при помощи php+ajax.

И я не говорил, что JS не имеет место быть. Типичный обитатель форума, которому не с кем поговорить. Сидит, несет х*рню абсолютную цепляясь к отдельным фразам, сам ровным счетом не знает ничего.

@novichek_1905 · 02.08.2019, 17:53

Imperion, как на примере данного кода, можно определить что произошло событие клика по определенной кнопке, например по "Кнопка 2", с помощью php? Был бы очень благодарен если вы меня просветите, а то так и останусь недофронтом.

PHP/HTML
1
2
3
4
5
<form action="">
  <button>Кнопка 1</button>
  <button>Кнопка 2</button>
  <button>Кнопка 3</button>
</form>

Добавлено через 6 минут

Сообщение от Imperion

С помощью PHP ловить клик)??? Серьёзно?
Да, серьезно!!!!

от слов к делу, пожалуйста, посмотрите задачку от меня выше, а то сейчас это оффтоп обсуждение, без конкретизации, я намерен разобраться все же, как это работает по вашему мнению.

@AlexZaw · 02.08.2019, 20:11

Сообщение от Imperion

Ничего, что он стандартными средствами JS получает элемент и работает с ним? Причем здесь вообще JQuery?

Ничего что разговор выше был про jQuery?
novichek_1905, Мне данный товарищ напоминает milton-а или как его там...

Добавлено через 30 минут
Вспомнил, не milton, а Miltorg. Тот тоже все в html массивы искал...

@iropov · 02.08.2019, 23:32 **[ТС]**

Ого норм диалог пошел.
Вот что хотелось бы в конечном результате получить.
Окно которое выезжает с верху, кнопка на этом окне, при нажатии (окно заезжает второй клик выезжает)))
Примерно так, в низу но тот код слишком за мудрён для меня, чувствую тот скрипт не такой уж и большой может быть.
dbmast.ru/files/slide-side-panel/index.html

Добавлено через 7 минут
И без анимации других кнопок и всякой ерунды

@galawar · 03.08.2019, 11:10

iropov, так пойдет? https://codepen.io/gwenn/pen/VoMzdz

@iropov · 03.08.2019, 11:31 **[ТС]**

Да супер то что нужно, только у них работает а у меня нет, какой то там странный HTML

@galawar · 03.08.2019, 11:51

iropov, поправил на обычный HTML и CSS, теперь у вас должно работать нормально. https://codepen.io/gwenn/pen/VoMzdz

@iropov · 03.08.2019, 13:28 **[ТС]**

Только кнопка появилась с тремя полосочками, но окно не выезжает. Пробовал хромом оперой и ураном.

Новые блоги и статьи Все статьи Все блоги /
Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI
Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .

@iropov 0 / 0 / 0 Регистрация: 02.08.2019 Сообщений: 15
	02.08.2019, 15:14 [ТС]
	я не знаю JQuery 0

@iropov 0 / 0 / 0 Регистрация: 02.08.2019 Сообщений: 15
	02.08.2019, 15:36 [ТС]
	не понимаю JQuery Добавлено через 35 секунд сделал, не работает 0

@Imperion -44 / 2 / 3 Регистрация: 22.12.2015 Сообщений: 508
	02.08.2019, 15:37
	Первый момент, лучше использовать стандартные теги, вместо самописных типа <button>. Тот же тег <input type="submit"> Второй момент, событие клика по кнопке отслеживается либо при помощи JavaScript, либо при помощи Php. Если не знаете ни первое, ни второе, то придется освоить для решения данной задачки. Там буквально одно условие понадобится. 0

@iropov 0 / 0 / 0 Регистрация: 02.08.2019 Сообщений: 15
	02.08.2019, 23:32 [ТС]
	Ого норм диалог пошел. Вот что хотелось бы в конечном результате получить. Окно которое выезжает с верху, кнопка на этом окне, при нажатии (окно заезжает второй клик выезжает))) Примерно так, в низу но тот код слишком за мудрён для меня, чувствую тот скрипт не такой уж и большой может быть. dbmast.ru/files/slide-side-panel/index.html Добавлено через 7 минут И без анимации других кнопок и всякой ерунды 0

@galawar 154 / 123 / 90 Регистрация: 09.04.2018 Сообщений: 351
	03.08.2019, 11:10
	Сообщение было отмечено iropov как решение Решение iropov, так пойдет? https://codepen.io/gwenn/pen/VoMzdz 1

@iropov 0 / 0 / 0 Регистрация: 02.08.2019 Сообщений: 15
	03.08.2019, 11:31 [ТС]
	Да супер то что нужно, только у них работает а у меня нет, какой то там странный HTML 0

@galawar 154 / 123 / 90 Регистрация: 09.04.2018 Сообщений: 351
	03.08.2019, 11:51
	iropov, поправил на обычный HTML и CSS, теперь у вас должно работать нормально. https://codepen.io/gwenn/pen/VoMzdz 0

@iropov 0 / 0 / 0 Регистрация: 02.08.2019 Сообщений: 15
	03.08.2019, 13:28 [ТС]
	Только кнопка появилась с тремя полосочками, но окно не выезжает. Пробовал хромом оперой и ураном. 0

Как при нажатии на кнопку изменить свойства css?

Решение