javascript 動態修改css樣式

sevi_stuo 發布于2019-04-23 13:39 / 1321人閱讀

摘要：方法一改變外聯文件，這里不講這個。方法二通過改變來改變樣式，語法或者方法三使用，語法這個方法優點可以這樣添加好幾個屬性。最后一個知識點，就是有一張大圖，通過控制來實現顯示大圖的某一部分。可以用來制作動畫。優點是減少請求，缺點是定位麻煩。

方法一：改變外聯css文件，這里不講這個。

方法二：通過改變claaName來改變樣式，語法：

obj.className = "style2";

//或者

obj.setAttribute("class", "style2");

方法三：使用obj.style.cssTest，語法：

 obj.style.cssText = " display:block; color:White;“

這個方法優點：

? ? ? ? ? ? ?可以這樣添加好幾個屬性。

缺點：會把obj原來的cssText清掉，解決方案：使用累加，語法：

obj.style.cssText +=?" display:block; color:White;“

上面cssText累加的方法在IE中是無效的。

然而，可以在前面添加一個分號來解決這個問題：

?obj.style.cssText +=?" ; display:block; color:White;“

注意：如果前面有樣式表文件寫著 div { text-decoration:underline; }，這個會被覆蓋嗎？不會！因為它不是直接作用于 HTML 元素的 style 屬性。

方法四：使用obj.style.backgroundColor,語法：

obj.style.backgroundColor= "black";

注意：backgroundColor可以換成其他屬性，這里僅是示例，比如color，position等。

最后一個知識點：css?Sprite，

就是有一張大圖，通過控制background-position來實現顯示大圖的某一部分。可以用來制作動畫。這個大圖是作為background-image:。

優點是減少http請求，缺點是定位麻煩。維護麻煩。

具體用法請移步：https://blog.csdn.net/u011349149/article/details/24181675

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

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

JQuery基礎修煉-樣式篇

摘要：具有相同的父元素，并匹配過濾選擇器子選擇器選擇所有指定元素中指定的的直接子元素。可見元素的寬度或高度，是大于零。元素的或被認為是可見的，因為他們仍然占用空間布局。 jQuery對象轉化成DOM對象 ? ? jQuery庫本質上還是JavaScript代碼，它只是對JavaScript語言進行包裝處理，為了是提供更好更方便快捷的DOM處理與開發常見中經常使用的功能。我們可以用jQuery...

_Dreams 2019-08-02 15:55 評論0 收藏0
JQuery基礎修煉-樣式篇

摘要：具有相同的父元素，并匹配過濾選擇器子選擇器選擇所有指定元素中指定的的直接子元素。可見元素的寬度或高度，是大于零。元素的或被認為是可見的，因為他們仍然占用空間布局。 jQuery對象轉化成DOM對象 ? ? jQuery庫本質上還是JavaScript代碼，它只是對JavaScript語言進行包裝處理，為了是提供更好更方便快捷的DOM處理與開發常見中經常使用的功能。我們可以用jQuery...

luck 2019-08-19 18:24 評論0 收藏0
雜談 CSS IN JS

摘要：缺乏高級編程特性影響同樣深遠，社區發展的預處理器能夠有效緩解，，，殊途同歸，異軍突起，基本實現變量嵌套變量混合擴展和邏輯等。前言關注點分離（separation of concerns）原則多年來大行其道，實踐中一般將 HTML、CSS、JavaScript 分開編寫維護，早期框架 angularjs 即是如此，直到 React 爭議中問世，引領關注點混合趨勢，驅使開發者重新審視 ...

Nosee 2019-08-29 14:03 評論0 收藏0
CSS變量（自定義屬性）使用指南 — SitePoint

摘要：預處理器可以讓你設置變量，并且在函數循環和數學操作等中使用。不同之處在于變量是運行在瀏覽器中的動態屬性，而預處理器變量會被編譯成普通的代碼。變量提供了更多可能性但這并不是說你需要在二者之間選擇其一你可以同時使用變量和預處理器變量的強大功能。 CSS預處理器，如Sass和Less，使得CSS代碼易于組織和維護。通過提供變量、混合、循環等特性，使得CSS具有動態編寫的能力，從而減少重復性工...

light 2019-08-02 16:14 評論0 收藏0
CSS變量（自定義屬性）使用指南 — SitePoint

摘要：預處理器可以讓你設置變量，并且在函數循環和數學操作等中使用。不同之處在于變量是運行在瀏覽器中的動態屬性，而預處理器變量會被編譯成普通的代碼。變量提供了更多可能性但這并不是說你需要在二者之間選擇其一你可以同時使用變量和預處理器變量的強大功能。 CSS預處理器，如Sass和Less，使得CSS代碼易于組織和維護。通過提供變量、混合、循環等特性，使得CSS具有動態編寫的能力，從而減少重復性工...

yankeys 2019-08-29 18:43 評論0 收藏0