javascript 動態(tài)修改css樣式

sevi_stuo 發(fā)布于2019-04-23 13:39 / 1335人閱讀

摘要：方法一改變外聯(lián)文件，這里不講這個。方法二通過改變來改變樣式，語法或者方法三使用，語法這個方法優(yōu)點可以這樣添加好幾個屬性。最后一個知識點，就是有一張大圖，通過控制來實現(xiàn)顯示大圖的某一部分?？梢杂脕碇谱鲃赢?。優(yōu)點是減少請求，缺點是定位麻煩。

方法一：改變外聯(lián)css文件，這里不講這個。

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

obj.className = "style2";

//或者

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

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

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

這個方法優(yōu)點：

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

缺點：會把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來實現(xiàn)顯示大圖的某一部分?？梢杂脕碇谱鲃赢?。這個大圖是作為background-image:。

優(yōu)點是減少http請求，缺點是定位麻煩。維護麻煩。

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2157.html

相關(guān)文章

JQuery基礎(chǔ)修煉-樣式篇

摘要：具有相同的父元素，并匹配過濾選擇器子選擇器選擇所有指定元素中指定的的直接子元素?？梢娫氐膶挾然蚋叨龋谴笥诹?。元素的或被認為是可見的，因為他們?nèi)匀徽加每臻g布局。 jQuery對象轉(zhuǎn)化成DOM對象 ? ? jQuery庫本質(zhì)上還是JavaScript代碼，它只是對JavaScript語言進行包裝處理，為了是提供更好更方便快捷的DOM處理與開發(fā)常見中經(jīng)常使用的功能。我們可以用jQuery...

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

摘要：具有相同的父元素，并匹配過濾選擇器子選擇器選擇所有指定元素中指定的的直接子元素?？梢娫氐膶挾然蚋叨?，是大于零。元素的或被認為是可見的，因為他們?nèi)匀徽加每臻g布局。 jQuery對象轉(zhuǎn)化成DOM對象 ? ? jQuery庫本質(zhì)上還是JavaScript代碼，它只是對JavaScript語言進行包裝處理，為了是提供更好更方便快捷的DOM處理與開發(fā)常見中經(jīng)常使用的功能。我們可以用jQuery...

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

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

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

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

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

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

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