Динамическое изменение атрибута стиля элемента с помощью JavaScript

У меня есть определенная таблица стилей для div. Теперь я хочу динамически изменить один атрибут 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>

Если вы хотите изменить атрибут стиля этого 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;';

работает для меня