添加CSS類使用document.getElementsByClassName

我試圖使用JavaScript來添加CSS類，但它不工作添加CSS類使用document.getElementsByClassName

var x = document.getElementsByClassName('oldclassname'); 
var i; 
for (i = 0; i < x.length; i++) { 
    x[i].className += 'newclassname'; 
}

，但是當我試圖改變背景，工作

var x = document.getElementsByClassName("oldclassname"); 
var i; 
for (i = 0; i < x.length; i++) { 

    x[i].style.backgroundColor = "red"; 
}

難道我做錯了什麼同時加入css文件

來源

2016-06-10 Aakash

@alastair棕色的答案是正確的。您還可以選擇避免使用[Element.classList]（https://developer.mozilla.org/en-US/docs/Web/API/Element/classList）處理'className'中的空格。你的代碼就是'[i] .classList.add（'newclassname'）' –

className是空格分隔類名列表。你的代碼的問題是它不會將類名與空格分開。試試這個：

var x = document.getElementsByClassName('oldclassname'); 
var i; 
for (i = 0; i < x.length; i++) 
{ 
    x[i].className += ' newclassname'; // WITH space added 
}

沒有空間，它只有一個類名

<div class="oldclassnamenewclassname"></div> 
//if use space 
<div class="oldclassname newclassname"></div>//get two class name

來源

2016-06-10 02:08:23

-1

它的工作原理。檢查你的目標類名稱的形成。示例代碼。

<html> 
<head> 
<style> 
.classFrom{ 
    font-family: sans-serif; 
    color: red; 
} 

.classTo{ 
    font-family:cursive; 
    color: blue; 
} 
</style> 

<script type="text/javascript"> 
function clickme(){ 
var elmList = document.getElementsByClassName('classFrom'); 
    for (i = 0; i < elmList.length; i++) 
    { 
     elmList[i].className += " classTo"; 
    } 
} 
</script> 
</head> 
<body> 
<div class="classFrom">SampleText</div> 
<button onClick="clickme()">ChangeCSS</button> 
</body> 
</html>

來源

2016-06-10 02:43:50

這將刪除以前的類。這顯然是不受歡迎的，因爲問題使用'+ ='而不是'='。 – Oriol

更好地利用classList：

var x = document.getElementsByClassName('oldclassname'); 
 
for (var i = 0; i < x.length; i++) { 
 
    x[i].classList.add('newclassname'); 
 
}

.newclassname { color: blue; }

<div class="oldclassname">Hello, world!</div>

來源

2016-06-10 02:50:38 Oriol

添加CSS類使用document.getElementsByClassName

回答

相關問題