JavaScript изменения CSS свойства

Question

Этот набор кода работает нормально, но мне интересно, если мы могли бы использовать переменную для хранения имущества STYLESHEET как письмо-интервал, цвет и т.д ...

function movespacing() { 
 
    document.styleSheets[0].cssRules[0].style.color = 'black'; 
 
}

h2 { 
 
    color: blue; 
 
}

<h2>letter-spacing: -5px</h2> 
 
<input type="button" value="click to see animation" onclick="movespacing();" />

Как вы знаете, как только вы нажмете на кнопку, цвет слова «расстояние между буквами» изменится на черный с любого предыдущего цвета. Теперь я стараюсь хранить CSS свойство в некоторой переменной, как

var cssColor = document.styleSheets.cssRules[0].style.color; 

затем ...

cssColor = "green"; 

и он не работает .. скажите, пожалуйста, почему

Существует одна более css-свойство, подобное буквенному интервалу, которое я также пробовал, но консоль дала мне ошибку в отношении недопустимых значений левых значений:

document.styleSheets[0].cssRules[0].style.letter-spacing = '5px'; 

Answer 1

Вам не нужно и не должно управлять стилями, изменяя таблицу стилей, за исключением особых ситуаций. Я не знаю, какое правило document.styleSheets[0].cssRules[0] указывает на (и оно может меняться в зависимости от того, какие таблицы стилей вы загружаете и порядок правил в них), но если вы хотите изменить цвет h2 на черный, нормальный способ сделать это CSS - это следующее.

<h2 id="h2"> 

.black { color: black; } 

document.getElementById('h2') . classList . add('black'); 

В зависимости от вашего браузера, или вы или нет с помощью JQuery, существуют различные способы, чтобы добавить класс. Например, вы можете использовать $('#h2').addClass('black') в jQuery.

Чтобы изменить цвет назад, вместо того чтобы помнить старое значение в таблице стилей и изменять таблицу стилей, вы просто удаляете класс 'black'.

Есть несколько других вещей, которые вы делаете неправильно:

1. Чтобы получить доступ к свойству из style объекта, вы должны использовать camelcased имя, как и в style.letterSpacing. Ваш подход (style.letter-spacing) привел бы к синтаксической ошибке (дефис - будет интерпретироваться как знак минуса).

2. Вы не можете изменить свойство объекта, присвоив его переменной, как вы это делаете (var cssColor = ...), а затем измените значение этой переменной. Для того чтобы упростить бит, переменные JavaScript не являются «указателями», по крайней мере, не так, как вы, кажется, намерены.