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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

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

Ответ 2

В дополнение к другим ответам, если вы хотите использовать тире для свойств стиля, вы также можете использовать:

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

Ответ 3

Я разрешаю аналогичную проблему с:

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

Надеюсь, что это поможет.

Ответ 4

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

Ответ 5

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

будет

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

Ответ 6

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

Надеюсь, что поможет

Ответ 7

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

также выполнит эту работу.