用js動態改變元素的css

Eidesen 發布于2019-08-20 18:25 / 875人閱讀

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

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

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

2: js中對應的css屬性的名字的規則

1: css中屬性的連字符（-）變為駝峰
    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設置的CSS屬性的權重
我們都知道在html中有三種方式來改變元素的css，分別是：
1: 內聯css

測試

2: 嵌入式

3: 外部引用

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

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

element.style = "fontSize: 40px";

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

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

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

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

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

1: className
2: classList

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

//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"]

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

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84486.html

根據瀏覽器渲染界面原理理解渲染阻塞、瀏覽器的重繪（repaints）與回流（reflows）

摘要：渲染阻塞在瀏覽器進行加載時，其實是并行加載所有資源。則就叫稱為重繪。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，并重新構造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程成為重繪。前面有講到當用戶在瀏覽器輸入url之后，經過一系列的過程，會最終向服務器請求到文檔數據，文檔數據請求到之后，瀏覽器會將這些數據傳給瀏覽器渲染引擎，渲染引擎開始正式工作了。構建...

phodal 2019-08-23 13:39 評論0 收藏0
根據瀏覽器渲染界面原理理解渲染阻塞、瀏覽器的重繪（repaints）與回流（reflows）

摘要：渲染阻塞在瀏覽器進行加載時，其實是并行加載所有資源。則就叫稱為重繪。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，并重新構造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程成為重繪。前面有講到當用戶在瀏覽器輸入url之后，經過一系列的過程，會最終向服務器請求到文檔數據，文檔數據請求到之后，瀏覽器會將這些數據傳給瀏覽器渲染引擎，渲染引擎開始正式工作了。構建...

daryl 2019-08-02 12:05 評論0 收藏0
根據瀏覽器渲染界面原理理解渲染阻塞、瀏覽器的重繪（repaints）與回流（reflows）

摘要：渲染阻塞在瀏覽器進行加載時，其實是并行加載所有資源。則就叫稱為重繪。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，并重新構造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程成為重繪。前面有講到當用戶在瀏覽器輸入url之后，經過一系列的過程，會最終向服務器請求到文檔數據，文檔數據請求到之后，瀏覽器會將這些數據傳給瀏覽器渲染引擎，渲染引擎開始正式工作了。構建...

ranwu 2019-08-29 17:22 評論0 收藏0
CSS 自定義屬性 -- 使用 JS 和不使用 JS

摘要：你曾想過在頁面加載過后去修改或的變量值么我曾經嘗試過但并沒有成功因為當預處理的代碼編譯成了它的變量就不再是變量了然而自定義屬性就沒有這樣的限制在該系列的文章中我曾提及過自定義屬性它最牛扳的特性就是它的動態性它的強大我們一眼就能對比出來預處理你曾想過在頁面加載過后去修改 Sass 或 Less 的變量值么? 我曾經嘗試過, 但并沒有成功, 因為當預處理的代碼編譯成了 CSS, 它的變...

megatron 2019-08-29 13:05 評論0 收藏0
如何在零JS代碼情況下實現一個實時聊天功能?

引言前段時間在 github 上看到了一個很trick的項目：用純 CSS（即不使用 JavaScript）實現一個聊天應用 —— css-only-chat。即下圖所示效果。 showImg(https://segmentfault.com/img/remote/1460000019242666?w=1503&h=870); 在我們的印象里，實現一個簡單的聊天應用（消息發送與多頁面同步）并不困...

shiweifu 2019-08-30 10:56 評論0 收藏0