js批量設置元素的樣式,js設置樣式有幾種方式

本文目錄一覽：

• 1、JS怎麼設置一個元素的樣式
• 2、用 js 給.class 批量修改css樣式怎麼寫??
• 3、JS怎麼批量修改子元素樣式？
• 4、js中巧用cssText屬性批量操作樣式
• 5、js/jquery 批量修改樣式

JS怎麼設置一個元素的樣式

document.getElementById(“div1”).className = “cc”;

這是完全正確的。

如果沒有達到你的效果，請檢查其他的地方，而不是懷疑這裡

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

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

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

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

JS怎麼批量修改子元素樣式？

!DOCTYPE html

html

head/head

body

div id=”div1″

p1/p

p2/p

p3/p

a444/a

/div

script type=”text/javascript”

Array.from(document.getElementById(“div1”).children).forEach(function(item){

item.style.background = “#ff0000”;

})

/script

/body

/html

js中巧用cssText屬性批量操作樣式

給一個HTML元素設置css屬性，如

複製代碼

代碼如下:

var

head=

document.getElementById(“head”);

head.style.width

=

“200px”;

head.style.height

=

“70px”;

head.style.display

=

“block”;

這樣寫太羅嗦了，為了簡單些寫個工具函數，如

複製代碼

代碼如下:

function

setStyle(obj,css){

for(var

atr

in

css){

obj.style[atr]

=

css[atr];

}

}

var

head=

document.getElementById(“head”);

setStyle(head,{width:”200px”,height:”70px”,display:”block”})

發現

Google

API

中使用了cssText屬性，後在各瀏覽器中測試都通過了。一行代碼即可，實在很妙。如

複製代碼

代碼如下:

var

head=

document.getElementById(“head”);

head.style.cssText=”width:200px;height:70px;display:bolck”;

和innerHTML一樣，cssText很快捷且所有瀏覽器都支持。此外當批量操作樣式時，cssText只需一次reflow，提高了頁面渲染性能。

但cssText也有個缺點，會覆蓋之前的樣式。如

複製代碼

代碼如下:

div

style=”color:red;”TEST/div

想給該div在添加個css屬性width

複製代碼

代碼如下:

div.style.cssText

=

“width:200px;”;

這時雖然width應用上了，但之前的color被覆蓋丟失了。因此使用cssText時應該採用疊加的方式以保留原有的樣式。

複製代碼

代碼如下:

function

setStyle(el,

strCss){

var

sty

=

el.style;

sty.cssText

=

sty.cssText

+

strCss;

}

使用該方法在IE9/Firefox/Safari/Chrome/Opera中沒什麼問題，但由於

IE6/7/8中cssText返回值少了分號

會讓你失望。

因此對IE6/7/8還需單獨處理下，如果cssText返回值沒”;”則補上

複製代碼

代碼如下:

function

setStyle(el,

strCss){

function

endsWith(str,

suffix)

{

var

l

=

str.length

–

suffix.length;

return

l

=

str.indexOf(suffix,

l)

==

l;

}

var

sty

=

el.style,

cssText

=

sty.cssText;

if(!endsWith(cssText,

‘;’)){

cssText

+=

‘;’;

}

sty.cssText

=

cssText

+

strCss;

}

相關：

js/jquery 批量修改樣式

script

$(function(){

    var aa = [{“id”:1,”name”:”yi”},{“id”:4,”name”:”si”},{“id”:6,”name”:”liu”},{“id”:8,”name”:”ba”},{“id”:”a”,”name”:”aaa”}];

    var arr = [];

    $.each(aa, function(i, n){

        arr.push(“” + n.id);

    });

    $(“div p”).each(function(){

        var _id = $(this).attr(“id”);

        if($.inArray(_id, arr) = 0) {

            $(this).addClass(“a”);

        }else{

            $(this).addClass(“b”);

        }

    });

    alert($(document.body).html()); //顯示結果

});

/script

divp id=”1″aa/div

divp id=”2″aa/div

divp id=”32″aa/div

divp id=”44″aa/div

divp id=”8″aa/div

divp id=”13″aa/div

divp id=”4″aa/div

divp id=”11″aa/div

結果：

divp class=”a” id=”1″aa/p/div

divp class=”b” id=”2″aa/p/div

divp class=”b” id=”32″aa/p/div

divp class=”b” id=”44″aa/p/div

divp class=”a” id=”8″aa/p/div

divp class=”b” id=”13″aa/p/div

divp class=”a” id=”4″aa/p/div

divp class=”b” id=”11″aa/p/div