動態新增css的三種方法(示例很清楚)

2021-08-27 07:42:55 字數 1129 閱讀 5971

**:

好久沒寫文章了今天關於動態新增css檔案寫一點想法

第一種新增方式:

document.getelementbyid(

"elementid

").style.background="

#ff0000";

這種方式採用內聯是插入css.優先順序高。容易引起頁面回流效能不好 也不能進行多個樣式的新增

第二種方式:

document.getelementsbytagname("a

")[0].style.csstext="

background:#ff0000;border:1px#dfdfdfsolid;";

這種方式相比第一種優點是可以一次進行多個樣式的設定,但仍是內聯式,引起頁面回流,多次插入引起效能上的消耗。

第三種是:直接在style標籤中寫,這種方法要考慮不同瀏覽器的相容性問題。(宣告:下面**引用」司徒正美「的一段**)

varaddsheet=function()

elseif(arguments.length==2)

else

if(!+"\v1")

}csscode=csscode+"\n";//增加末尾的換行符,方便在firebug下的檢視。

varheadelement=doc.getelementsbytagname("head")[0];

varstyleelements=headelement.getelementsbytagname("style");

if(styleelements.length==0)

else

}varstyleelement=styleelements[0];

varmedia=styleelement.getattribute("media");

if(media!=null&&!/screen/.test(media.tolowercase()))

if(styleelement.stylesheet)

elseif(doc.getboxobjectfor)

else}

4.動態載入css檔案,這個就簡單了

functionaddstyle(stylepath)

addstyle('css/add.css');

CSS清除浮動的三種方法,很實用

css清除浮動的方法有哪些呢?經常性地會使用到float,很多邪門的事兒都有可能是浮動在作怪,清除浮動是必須要做的,而且隨時性地對父級元素清除浮動的做法也被認為是書寫css的良好習慣之一。下面看今天的教程,此為未清除浮動源 執行 無法檢視到父級元素淺黃色背景。left right 一 使用空標籤清除...

新增樣式的三種方法

css的新增 1.行間樣式 寫在標籤上 優點 直觀的可以看到樣式作用在誰身上 缺點 無法復用,不利於後期的維護和修改 2.內部樣式 寫在當前頁面的head裡面 優點 可以在當前頁面復用 缺點 無法在其他頁面進行復用,多頁面的維護修改不方便 3.外部樣式 推薦使用 寫在外面的 css 字尾檔案中,引入...

css隱藏的三種方法

1 使用display none來隱藏所有內容 display none可以讓網頁中所有內容不顯示,如 文字 鏈結 div層,是推薦的內容隱藏方式。style display none 我不占地兒,你看不見我 div 值 描述 none 此元素不會被顯示。block 此元素將顯示為塊級元素,此元素前...