js控制class樣式修改,js如何定義class

本文目錄一覽：

• 1、用 js 給.class 批量修改css樣式怎麼寫??
• 2、怎樣實現js改變class功能？
• 3、js 如何控制class？

用 js 給.class 批量修改css樣式怎麼寫??

1、既然你都用了byClassName，說明他們都有同一個類名，你直接再css裡面改這個類名的樣式就行了。

2、你要用js修改，你修改的是內聯樣式，那你只有每一個用for循環來修改。

3、或者你可以就寫一個新的公共樣式，然後for循環給每一個你需要修改樣式的標籤用setAttribute(“class”,newClassName)就行了。將新的類名加上去去覆蓋之前類的樣式

怎樣實現js改變class功能？

1、JavaScript允許你更改元素的class或id。當你更改之後，瀏覽器會自動更新元素的樣式。

2、是className，可不是class

注意：JavaScript使用的是className去訪問class屬性，因為class是一個保留關鍵字，因為將來JavaScript可能開始支持像Java一樣的類。

例子：

!doctype html

html lang=”zh-cn”

 head

  meta charset=”UTF-8″

  titleTest/title

  style type=”text/css”

p { 

color: #000000; /* black */ 

} 

p.emphasis { 

color: #cc0000; /* red */ 

} 

  /style

 /head

 body

p id=”test”Test/p

hr

input type=”button” value=”修改className為emphasis” onclick=”document.getElementById(‘test’).className = ’emphasis’;”br

input type=”button” value=”修改className為空” onclick=”document.getElementById(‘test’).className = ”;”br

 /body

/html

js 如何控制class？

script type=”text/javascript”

window.onload = function() {

var abcs = document.getElementsByClassName(“abc”);

for(var i = 0; i abcs.length; i++) {

abcs[i].style.width = “50%”;

}

};

/script

注意：上面的代碼不支持 IE 6/7，因為 IE 6/7 不支持 getElementsByClassName。

下面的代碼支持 IE 6/7，使用 getElementsByTagName 查找 div，再查找 abc

script type=”text/javascript”

window.onload = function() {

var divs = document.getElementsByTagName(“div”);

for(var i = 0; i divs.length; i++) {

var classes = divs[i].className.split(” “);

for(var a = 0; a classes.length; a++) {

if(classes[a] === “abc”) {

divs[i].style.width = “50%”;

break;

}

}

}

};

/script