Динамічно змінюється атрибут стилю елементів за допомогою JavaScript

Я маю певну таблицю стилів для діва. Тепер я хочу змінити один атрибут div динамічно за допомогою js.

Як я можу це зробити?

document.getElementById("xyz").style.padding-top = "10px";

Це правильно?

Це майже правильно.

Оскільки -оператор javascript, то в іменах властивостей його реально не можна. Якщо ви налаштовували borderабо щось замість цього однозначне, ваш код спрацював би чудово.

Однак, що вам потрібно пам’ятати padding-top, а також будь-яке ім'я атрибута через дефіс - це те, що в JavaScript ви видаляєте дефіс і робите наступну велику літеру, тому у вашому випадку це буде paddingTop.

Є деякі інші винятки. У JavaScript є кілька зарезервованих слів, тому ви не можете встановити floatце, наприклад. Натомість у деяких браузерах потрібно використовувати, cssFloatа в інших styleFloat. Саме для таких розбіжностей рекомендується використовувати таку структуру, як jQuery, яка обробляє несумісність браузера для вас ...

На додаток до інших відповідей, якщо ви хочете використовувати тире з тиском для властивостей стилю, ви також можете використовувати:

document.getElementById("xyz").style["padding-top"] = "10px";

Я вирішую подібну проблему з:

document.getElementById("xyz").style.padding = "10px 0 0 0";

Сподіваюся, що це допомагає.

Також є style.setPropertyфункція:
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

document.getElementById("xyz").style.setProperty('padding-top', '10px');

// version with !important priority
document.getElementById("xyz").style.setProperty('padding-top', '10px', 'important');

Припустимо, у вас такий HTML:

<div id='thediv'></div>

Якщо ви хочете змінити атрибут стилю цього діла, скористайтеся

document.getElementById('thediv').style.[ATTRIBUTE] = '[VALUE]'

Замініть [ATTRIBUTE]потрібний атрибут стилю. Не забудьте видалити "-" і зробіть наступну велику літеру.

Приклади

document.getElementById('thediv').style.display = 'none'; //changes the display
document.getElementById('thediv').style.paddingLeft = 'none'; //removes padding

document.getElementById("xyz").style.padding-top = '10px';

буде

document.getElementById("xyz").style["paddingTop"] = '10px';

Я рекомендую використовувати для цього функцію, яка приймає ідентифікатор елемента та об'єкт, що містить властивості CSS. Таким чином ви записуєте кілька стилів одночасно та використовуєте стандартний синтаксис властивості CSS.

//function to handle multiple styles
function setStyle(elId, propertyObject) {
    var el = document.getElementById(elId);
    for (var property in propertyObject) {
        el.style[property] = propertyObject[property];
    }
}

setStyle('xyz', {'padding-top': '10px'});

Ще краще ви можете зберігати стилі в змінній, що полегшить управління властивостями, наприклад

var xyzStyles = {'padding-top':'10px'}
setStyle('xyz', xyzStyles);

Сподіваюся, що це допомагає

Здивовано, що я не бачив рішення, яке вибирається нижче за вибором запиту ,

document.querySelector('#xyz').style.paddingTop = "10px"

Рішення CSSStyleDeclaration , приклад прийнятої відповіді

document.getElementById('xyz').style.paddingTop = "10px";

document.getElementById("xyz").setAttribute('style','padding-top:10px');

також зробив би цю роботу.

document.getElementById('id').style = 'left: 55%; z-index: 999; overflow: hidden; width: 0px; height: 0px; opacity: 0; display: none;';

працює для мене