JavaScript的改變CSS屬性

Question

這組代碼工作正常，但我想知道，如果我們可以使用可變樣式表的屬性存儲像字母間距，顏色等...

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();" />

正如你所知道的，一旦你點擊了按鈕，'letter-spacing'這個單詞的顏色就會從之前的顏色變成黑色。 現在，我也嘗試商店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，有不同的方法來添加類。例如，你可以在jQuery中使用$('#h2').addClass('black')。

要更改顏色，而不是記住樣式表中的舊值，並將樣式表改回來，只需刪除'black'類。

有你正在做一些其他的事情錯了：

1. 要從style訪問對象的屬性，您需要使用名稱駝峯，爲style.letterSpacing。您的方法（style.letter-spacing）會導致語法錯誤（連字符-將被解釋爲負號）。

2. 通過將對象的屬性分配給變量（var cssColor = ...）然後更改該變量的值，您無法更改該對象的屬性。爲了簡化一下，JavaScript變量不是「指針」，至少不是你想要的方式。