用js動態(tài)改變元素的css

Eidesen 發(fā)布于2019-08-20 18:25 / 877人閱讀

摘要：對象跟別的屬性一樣，也是元素的一個屬性，只是屬性是一個比較特殊的屬性，它不是一個字符串，而是一個叫做的對象一個包含屬性的對象。返回的是一個對象一個只讀的類數(shù)組對象。

1: CSSStyleDeclaration對象
跟別的屬性一樣，style也是元素的一個屬性，只是style屬性是一個比較特殊的屬性，它不是一個字符串，而是一個叫做CSSStyleDeclatation的對象：一個包含CSS屬性的對象。比如：

element.style.fontSize = "20px";
element.style.color = "#fff";

2: js中對應的css屬性的名字的規(guī)則

1: css中屬性的連字符（-）變?yōu)轳劮?    element.style.fontSize = "20px";
    
2: 當屬性為js保留字時，在前面加前綴"css"
    element.style.cssFloat = "left";
    
3: 給屬性賦值必須為字符串類型: 
    element.style.fontSize = "40px"; (對的)
    element.style.fontSize = 40;（錯的）
    element.style.fontSize = "40";（也是錯的，需要帶上單位，除非是‘100%’之類的百分百）

3: css中的復合樣式
在js里面也可以像在css中那樣使用復合樣式，比如：

element.style.padding = "20px 30px 40px 50px";

以上代碼使用復合樣式屬性‘padding’給元素指定了"padding-top", "padding-right", "padding-bottom", "padding-left"的值，分別為"20px", "30px", "40px", "50px".
4: 通過js設(shè)置的CSS屬性的權(quán)重
我們都知道在html中有三種方式來改變元素的css，分別是：
1: 內(nèi)聯(lián)css

測試

2: 嵌入式

3: 外部引用

在這三種里面，我們知道第一種內(nèi)聯(lián)式的權(quán)重是最高的。通過js來設(shè)置的css正好就是內(nèi)聯(lián)的式，所以他會覆蓋嵌入式和外部引用的同名css屬性。

還有一個很重要的點：要避免直接給style對象整個賦值，比如

element.style = "fontSize: 40px";

如果這個元素本來的內(nèi)聯(lián)屬性有很多，而你的本意其實只是想改變fontSize; 但是，通過上面的代碼，會把其他的內(nèi)聯(lián)屬性都去掉，最后只留下了fontSize.

4: window.getComputedStyle(element, pseudoElement);
在全局對象window上有一個方法叫‘getComputedStyle()’, 通過它可以獲取某個元素的最終的計算出來的屬性，也就是最終告訴瀏覽器怎么去渲染這個元素的css的屬性。
這個方法接受兩個參數(shù)：

1: element 
 想要查詢的元素，必須
 
2: pseudoElement
 想要查詢的元素的偽元素，當是null或者空字符串時，就是表示想查詢元素本身，而不是偽元素

這個方法的返回值也是一個CSSStyleDeclaration對象，只是它和元素的style屬性有一些區(qū)別：
1: 它是只讀的
2: 它返回的css屬性的值是經(jīng)過計算了的。
類似于百分比，rem之類的相對值，不會被返回，而是返回換算好之后的絕對值，比如只會返回px為單位的值
3: 顏色以"rgb(#, #, #)"或者‘rgba(#, #, #, #)’返回，而不是16進制
4: 復合樣式，會以特定的屬性返回。
比如window.getComputedStyle(element, pseudoElement).padding是沒有的，應該查詢window.getComputedStyle(element, pseudoElement).paddingTop

4: 獲取一個元素的類名
想獲取一個元素的CSS類名，有兩個屬性都可以做到：

1: className
2: classList

先來實驗一下，直觀地感受一下這兩者的區(qū)別。假如，我們有一個元素：

//HTML code
test

//js code
var ele = document.querySelector(".z-top-container");
ele.className; //"z-top-container has-banner"
ele.classList; // ["z-top-container", "has-banner", value: "z-top-container has-banner"]

從上面的例子我們就可以看出區(qū)別：

1: className返回一個字符串，如果這個元素有多個class，則以空格分隔。
2: classList返回的是一個DOMTokenList對象：一個只讀的類數(shù)組對象。

接下來我們著重地來說一下這個DOMTokenList對象。
DOMTokenList對象定義了三個修改元素的class的方法：

1: add(className)
    參數(shù)為class名字，類型為字符串，作用是給這個元素添加一個class
    ele.classList.add("hehe"); //給元素ele添加了一個名為‘hehe’的長css 類
2: remove(className)
    參數(shù)為class名字，類型為字符串，作用是給這個元素刪除一個class
    ele.classList.remove("hehe");//從ele的css類里面去掉‘hehe’這個類
3: toggle(className)
    參數(shù)為class名字，類型為字符串，作用是如果元素沒有這個class，就添加；如果已經(jīng)有了，就刪除。