原生js給元素添加樣式,js給dom元素添加樣式

本文目錄一覽：

• 1、怎樣通過JS來為網頁元素添加CSS樣式
• 2、JS里添加樣式
• 3、用JavaScript給所有相同的class添加CSS樣式。
• 4、如何用javascript為元素添加class？

怎樣通過JS來為網頁元素添加CSS樣式

例如改變背景色：

div id=”changeColor”使用JS改變背景色/div

script

var cc = document.getElementById(“changeColor”);

cc.style.backgoundColor=”#000″; //將背景色改為黑色

cc.style.fontSize=”20px”; // 將文字大小改為20px，等號右邊也可以寫為20+”px”

cc.style.color=”#fff”; //將文字顏色改為白色

/script

以此類推即可

JS里添加樣式

JS里添加樣式的方法：

1、首先，要創建標籤，使用document.createElement函數，如圖創建div標籤。使用其className設置class，id設置id，style設置樣式。

2、樣式的設置也可以分項進行。如圖是分項設置其left，top，display，position，width幾個樣式。

3、通過設置標籤的innerHTML屬性可以直接給其添加子標籤以及子標籤的樣式。當然，也可以分項分層添加標籤。

4、設置好標籤（如圖是div標籤，變數名box），使用document.body.appendChild添加標籤到body當中。

5、標籤添加以後，依然可以修改樣式，如圖是使用document.getElementById方法根據id獲取標籤，修改style。

6、標籤添加以後，也可以給其添加和刪除event處理。如圖是使用jQuery給id為img-preview-box的標籤添加hover滑鼠經過的處理。

用JavaScript給所有相同的class添加CSS樣式。

!doctype html

html lang=”en”

 head

  meta charset=”UTF-8″

  meta name=”Generator” content=”EditPlus®”

  meta name=”Author” content=””

  meta name=”Keywords” content=””

  meta name=”Description” content=””

  titleDocument/title

 /head

 body

 div id=”container” style=”width: 480px; height: 220px;border:1px solid #e3e3e3;” onclick=”renderLink();”

    a href=”#” class=”mya”Test1/a

    a href=”#”Test2/a

    a href=”#” class=”mya”Test3/a

    a href=”#” class=”mya”Test4/a

    a href=”#” class=”mya”Test5/a

    a href=”#”Test6/a

 /div

 /body

/html

script type=”text/javascript”

    function renderLink(){

        var alist = document.getElementsByClassName(“mya”);

        if(alist){

            for(var idx = 0; idx  alist.length; idx ++){

                var mya = alist[idx];

                mya.style.color = “red”;

                mya.style.fontSize = “36px”;

            }

        }

    }

  /script

先用document.getElementsByClassName(“className”)取得所有class為className的元素，再循環添加樣式即可，如果用JQuery會簡單很多；也可以自己用JS封裝一個函數實現JQuery一樣的效果

如何用javascript為元素添加class？

以給 body 標籤添加 class 為例

通過 jQuery

$( ‘body’).addClass( ‘class1 class2’ );

$( ‘body’ ).removeClass( ‘class1 class2’ );

支持 classList 的高級瀏覽器（IE10+，Chrome，Firefox，Safari）

document.body.classList.add( ‘class1’, ‘class2’ );

document.body.classList.remove( ‘class1’, ‘class2’ );

不支持 classList 的瀏覽器只能通過 className 來添加

document.body.className += ‘ cl

[1]直接把樣式賦值給className

var odiv=document.getElementById(‘div1’);

odiv.className= div3

//這樣我們會得到 class =”div3″ 會直接把div2樣式給覆蓋掉;

[2]使用累加賦值給className

var odiv=document.getElementById(‘div1’);

odiv.className+=” “+div3  //樣式和樣式之間需要空隙 ，所以加個空字元串隔開

//這樣可以得到 class=”div2 div3″ 可以正常增加，但是我們在添加樣式的時候我們得考慮下他本身之前有沒有同名的樣式，如果有我們添加的話就會變成累贅 比如class=”div2 div3 div3″;

[3]檢測樣式原先之前是否有相同的樣式

var odiv=document.getElementById(‘div1’);　

function hasClass(element,csName){

element.className.match(RegExp(‘(\\s|^)’+csName+'(\\s|$)’)); //使用正則檢測是否有相同的樣式

}

[4]在[3]的基礎上我們就可以進行判斷性給元素添加樣式了　

var odiv=document.getElementById(‘div1’);　

function hasClass(element,csName){

return 　element.className.match(RegExp(‘(\\s|^)’+csName+'(\\s|$)’)); //使用正則檢測是否有相同的樣式

}　

function addClass(element,csName){

if(!hasClass(element,csName)){

element.className+=’ ‘+csName;