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

Question

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

У меня есть определенная таблица стилей для div. Теперь я хочу изменить один атрибут div динамически, используя js.

Как я могу это сделать?

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

Правильно ли это?

676 10

javascript html css

10 ответов:

Comments

Ничего не найдено.

David Hedlund · Accepted Answer · 2015-11-13 18:26:35

Это почти правильно.

Так как - является оператором javascript, вы не можете действительно иметь это в именах свойств. Если бы вы устанавливали вместо этого border или что-то односложное, ваш код работал бы просто отлично.

Однако, вещь, которую вы должны помнить для padding-top, и для любого имени атрибута с дефисом, заключается в том, что в javascript вы удаляете дефис и делаете следующую букву прописной, так что в вашем случае это будет paddingTop.

Есть некоторые другие исключения. В JavaScript есть несколько зарезервированных слов, поэтому вы не можете установить float, например. Вместо этого в некоторых браузерах нужно использовать cssFloat , а в других styleFloat. Именно для таких несоответствий рекомендуется использовать фреймворк, такой как jQuery, который обрабатывает несовместимости браузера для вас...

KooiInc · Accepted Answer · 2011-03-04 13:10:17

В дополнение к другим ответам, Если вы хотите использовать тире notition для свойств стиля, вы также можете использовать:
document.getElementById("xyz").style["padding-top"] = "10px";

chairul · Accepted Answer · 2014-08-14 23:27:45

Аналогичную задачу я решаю с помощью:
document.getElementById("xyz").style.padding = "10px 0 0 0";
Надеюсь, это поможет.

JohnP · Accepted Answer · 2015-11-02 02:50:18

Предполагая, что у вас есть 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

T.Todua · Accepted Answer · 2013-11-04 21:42:27

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

Будет

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

rjbultitude · Accepted Answer · 2015-11-16 14:25:02

Я бы рекомендовал использовать функцию, которая принимает идентификатор элемента и объект, содержащий свойства 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);
Надеюсь, что это поможет

Pinkesh Badjatiya · Accepted Answer · 2015-11-16 14:24:05

document.getElementById("xyz").setAttribute('style','padding-top:10px');
Также сделал бы эту работу.

icl7126 · Accepted Answer · 2017-10-15 14:25:19

Есть также style.setProperty function:
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');

Rama · Accepted Answer · 2018-04-30 16:39:30

Удивило , что я не увидел ниже селектор запросов способ решения,
document.querySelector('#xyz').style.paddingTop = "10px"
CSSStyleDeclaration решения, пример принятого ответа
document.getElementById('xyz').style.paddingTop = "10px";

Hyperion · Accepted Answer · 2018-04-04 21:10:48

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

Работает на меня