Встроенные значения CSS легко установить с помощью javascript. Если я хочу изменить ширину и у меня есть вот такой HTML:
<div style="width: 10px"></div>
Все, что мне нужно сделать, это:
document.getElementById('id').style.width = value;
Это изменит значения встроенной таблицы стилей. Обычно это не проблема, потому что встроенный стиль переопределяет таблицу стилей. Пример:
<style>
#tId {
width: 50%;
}
</style>
<div id="tId"></div>
Используя этот Javascript:
document.getElementById('tId').style.width = "30%";
Получаю следующее:
<style>
#tId {
width: 50%;
}
</style>
<div id="tId" style="width: 30%";></div>
Это проблема, потому что я не только не хочу изменять встроенные значения, если я ищу ширину перед ее установкой, когда у меня есть:
<div id="tId"></div>
Возвращаемое значение равно Null, поэтому, если у меня есть Javascript, которому необходимо знать ширину чего-либо для выполнения некоторой логики (я увеличиваю ширину на 1%, а не до определенного значения), возвращаю Null, когда я ожидаю строку «50%. "действительно не работает.
Итак, мой вопрос: у меня есть значения в стиле CSS, которые не расположены встроенными, как я могу получить эти значения? Как я могу изменить стиль вместо встроенных значений с учетом идентификатора?