--Добавим стилей для элемента которые будем менять--> .box  width: 75px; height: 75px; background-color: #444; >   class="box">

в секции со скриптами HTML документа, надо добавить определение указанных функций на кнопках со следующей логикой:

cоnst chаngeColor = () =>  // Выбираем элемент на странице, получаем доступ к списку стилей и меняем нужному значение. documеnt.getElementsByClassName('box')[0].stylе.backgroundColor = "#38d9a9"; > cоnst аddWidth = () =>  documеnt.getElementsByClassName('box')[0].stylе.width = "175px"; > 

Как изменить свойство класса CSS через JS?

Вы не можете изменить уже описанный класс, так как он фиксирован в CSSOM. Именно класс, так как он может быть применён ко многим элементам.

Но вы можете описать дополнительные классы, в которых значения нужных вам свойств будут иметь нужные вам значения и добавлять их к нужным элементам в нужный момент, например, при нажатии. addEventListener, classList

Но при этом вам нужно следить за весом селектора, чтобы нужное вам правило применилось в правильном порядке и перезаписало нужные вам свойства. Selector, selector specificity.

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать

Артем Спиридонов @customtema

Легко. Сколько угодно.

document.write('');

Как изменить свойство класса с помощью js?

Есть div с классом mystyle . В классе есть свойство margin как его изменить с помощью обычного js или jquery?

.mystyle, .mystyle ul

Отслеживать
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков
задан 28 фев 2017 в 6:12
393 3 3 золотых знака 12 12 серебряных знаков 45 45 бронзовых знаков
– user256824
6 ноя 2019 в 4:05

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

document.getElementsByClassName('mystyle')[0].style.margin = "50px"; 

document.getElementsByClassName('mystyle')[0].style= "margin: 50px"; 

$('.mystyle').css('margin','50px'); 

Отслеживать
ответ дан 28 фев 2017 в 6:23
59 7 7 бронзовых знаков

Если нужно поменять во всех элементах этого класса:

$('.mystyle').css('margin','10px') 

Если прямо в стилях нужно поменять:

$(function() < var ss = document.styleSheets[0]; var rules = ss.cssRules || ss.rules; var h1Rule = null; for (var i = 0; i < rules.length; i++) < var rule = rules[i]; if (/(^|,) *\.mystyle *(,|$)/i.test(rule.selectorText)) < h1Rule = rule; break; >> h1Rule.style.margin='10px' console.log(h1Rule.style.margin) >);

.mystyle

 
Header

Отслеживать
ответ дан 28 фев 2017 в 6:16
9,720 2 2 золотых знака 17 17 серебряных знаков 49 49 бронзовых знаков

function getClassByName(className)

.mystyle, .mystyle ul

Отслеживать
ответ дан 15 июн 2020 в 14:06
11 2 2 бронзовых знака

Невозможно переписывать CSS стиле с помощью JS. Лучше создай новый класс с нужными свойствами и добавляй его.

 .mystyle, .mystyle ul < margin: 0; >.mystyle.active < margin: 20px 0; >.mystyle.active ul

 document.querySelector('.mystyle').classList.add('active'); 

$('.mystyle').addClass('active'); 

Отслеживать
ответ дан 3 мар 2017 в 10:04
Roman Kryvun Roman Kryvun
29 3 3 бронзовых знака
Неправда. Возможно. Но jQuery в этом не помощник.
3 мар 2017 в 10:11

• javascript
• html
• jquery
• css

Важное на Мете

Связанные

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как изменить CSS свойство через JS?

Подскажите, как изменить класс с помощью JS(jqwery), нужно чтобы при клике менялось свойство родительского элемента при клике на .start (он внутри body) у всего body исчез overflow (полосы прокрутки)

$(function () < $('.start').on('click', function () < $('.body')(function () < if ($(this).css('overflow') === 'hidden') < $(this).removeAttr('style'); >>); >); >);

• Вопрос задан более трёх лет назад
• 1939 просмотров

2 комментария

Простой 2 комментария

ThunderCat @ThunderCat Куратор тега JavaScript
body это класс или тэг?

Junior Coder @juniorcoder Автор вопроса
у тега body для наглядности добавлен класс .body
Решения вопроса 1

Finding myself

У вас странно сформулирован вопрос.

Если вам нужно по клику изменить класс у родительского элемента .start :
1) находите нужного родителя $(this).closest(‘.parent-class’)
2) меняете класс через .removeClass(), .addClass(), .toggleClass()

Если вам нужно, чтобы по клику на .start у .body убирался overflow: hidden

$('.start').on('click', function () < $('.body').css('overflow', ''); >);

Если вам нужно, чтобы по клику на .start у .body убирался style

$('.start').on('click', function () < $('.body').removeAttr('style'); >);

Если вам нужно убрать style по условию

$(function () < $('.start').on('click', function () < if ($('.body').css('overflow') === 'hidden') < $('.body').removeAttr('style'); >>); >);