--Добавим стилей для элемента которые будем менять--> .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"; > 

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

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

.mystyle, .mystyle ul

Отслеживать
123k 24 24 золотых знака 126 126 серебряных знаков 303 303 бронзовых знака
задан 28 фев 2017 в 6:12
393 3 3 золотых знака 13 13 серебряных знаков 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'); 

DOM — Изменение CSS

HTML DOM позволяет JavaScript изменять стиль HTML элементов.

document.getElementById(id).style.свойство = новый стиль

В следующем примере изменяется стиль элемента :

   
Hello World!
    

Использование событий

HTML DOM позволяет выполнять код при возникновении какого-либо события.

События генерируются браузером, когда с HTML элементом «что-то происходит»:

• на элемент кликнули мышкой
• страница полностью загрузилась
• поле ввода было изменено

Подробнее о событиях вы узнаете в следующей главе этого учебника.

В следующем примере изменяется стиль HTML элемента с id=»id1″, когда пользователь нажимает на кнопку:

    
Заголовок 1
 Нажми меня!   

Как в js изменить css

Для работы со стилевыми свойствами элементов в JavaScript применяются, главным образом, два подхода:

• Изменение свойства style
• Изменение значения атрибута class

Свойство style

Свойство style представляет сложный объект CSSStyleDeclaration и напрямую сопоставляется с атрибутом style html-элемента. Этот объект содержит набор свойств CSS, к которым можно обратиться следующим образом:

element.style.свойствоCSS

Например, установим цвет шрифта заголовка:

      
Home Page
    

Здесь для заголовка в качестве цвета устанавливаем синий цвет navy. В данном случае название свойства color совпадает со свойством css. Аналогично мы могли бы установить цвет с помощью css:

#header

Однако ряд свойств css в названиях имеют дефис, например, font-family . В JavaScript для этих свойств дефис не употребляется. Только первая буква, которая идет после дефиса, переводится в верхний регистр:

const header = document.getElementById("header"); header.style.fontFamily = "Verdana";

Свойство className

С помощью свойства className можно получить или установить значение атрибута class элемента html. Например:

     .header-color .header-font 
Home Page
    

Здесь получаем текущий класс заголовка и затем изменяем его на новый класс — «header-color». Благодаря использованию классов не придется настраивать каждое отдельное свойство css с помощью свойства style .

Но при этом надо учитывать, что прежнее значение атрибута class удаляется. Поэтому, если нам надо добавить класс, надо объединить его название со старым классом:

header.className = header.className + " header-color";

И если надо вовсе удалить все классы, то можно присвоить свойству пустую строку:

header.className = "";

Свойство classList

Выше было рассмотрено, как добавлять классы к элементу, однако для управления множеством классов гораздо удобнее использовать свойство classList . Это свойство представляет объект, реализующий следующие методы:

• add(className) : добавляет класс className
• remove(className) : удаляет класс className
• toggle(className) : переключает у элемента класс на className. Если класса нет, то он добавляется, если есть, то удаляется

     .header-color .header-font .header-size 
Home Page
    

Стоит отметить, что метод toggle() дополнительно может принимать условие в качестве второго параметра — если это условие верно (возвращает true ), то класс переключается:

const i = 5; const condition = i > 0; // условие const header = document.getElementById("header"); header.classList.toggle("header-color", condition); // переключаем класс header-color по условию

При необходимости мы можем перебрать все классы из списка classList или получить отдельные классы по индексу:

// перебор списка классов for(headerClass of header.classList) < console.log(headerClass); >console.log(header.classList[0]); // первый установленный класс