javascript插入樣式實現代碼

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

javascript插入樣式在前端開發中應用比較廣泛，特別是在修改前端表現和頁面換膚的時候。最近做的這個任務是使用者在別人的網站上點擊一個按鈕，就會在別的網站頁面下插入一個指令碼，執行，這其中包含了樣式的插入。

一般情況下javascript動態插入樣式有兩種，一種頁面中引入外部樣式,在<head>中使用<link>標籤引入一個外部樣式檔案，另一種是在頁面中使用<style>標籤插入頁面樣式（這裡說的不是style屬性）。
一、頁面中引入外部樣式：
在<head>中使用<link>標籤引入一個外部樣式檔案，這個比較簡單，各個主流瀏覽器也不存在相容性問題：複製代碼代碼如下:function includeLinkStyle(url) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
includeLinkStyle("http://css.jb51.net/home/css/reset.css?v=20101227");

但是在我目前做的這個項目中本身應用的樣式非常少，直接用引入一個外部樣式檔案似乎不合適，所以我選擇了第二種方案，在頁面中使用<style>標籤插入頁面樣式。
二、使用<style>標籤插入頁面樣式：
這種方式在各個主流瀏覽器存在相容性問題，像firefox等標準瀏覽器無法直接擷取設定styleSheet的cssText值，標準瀏覽器下只能使用document.styleSheets[0].cssRules[0].cssText單個擷取樣式；同時使用：document.styleSheets[0].cssRules[0].cssText=newcssText；頁面不會自動更新樣式，必須使用：document.styleSheets[0].cssRules[0].style.cssText=newcssText；這點似乎沒坑爹的IE來的人性化和簡便。YUI中使用了一個很好的辦法：style.appendChild(document.createTextNode(styles));採用createTextNode將樣式字串添加到<style>標籤內；複製代碼代碼如下:function includeStyleElement(styles,styleId) {
if (document.getElementById(styleId)) {
return
}
var style = document.createElement("style");
style.id = styleId;
//這裡最好給ie設定下面的屬性
/*if (isIE()) {
style.type = "text/css";
style.media = "screen"
}*/
(document.getElementsByTagName("head")[0] || document.body).appendChild(style);
if (style.styleSheet) { //for ie
style.styleSheet.cssText = styles;
} else {//for w3c
style.appendChild(document.createTextNode(styles));
}
}
var styles = "#div{background-color: #FF3300; color:#FFFFFF }";
includeStyleElement(styles,"newstyle");

這樣頁面中的元素就能直接應用樣式了，不管你的這些元素是不是通過指令碼追加的。
關於手賤：
看這段代碼：複製代碼代碼如下:var divObj = document.createElement("div");
divObj .id = "__div";
divObj .innerHTML="測試js插入DOM和樣式";
document.body.appendChild(divObj );
var styles = "#__div{background-color: #FF3300; color:#FFFFFF }";
includeStyleElement(styles,"newstyle");

前面說了這個項目是使用者在別人的網站上點擊一個按鈕，就會在別的網站頁面下插入一個指令碼，執行，這其中包含了樣式的插入，我為了儘可能的保證我建立的元素ID唯一性，手賤在元素ID前加了“__”,表示私人防止衝突。結果悲劇了，IE6，IE7 class和id的命名不能以底線開頭（“_”），竟然把這個給忘了！花了兩個小時才找到原因。悲劇啊！得出一個結論！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More