Javascript動態引用CSS文件的2種方法介紹

来源:http://www.cnblogs.com/good10000/archive/2016/10/26/6001032.html
-Advertisement-
Play Games

最近做一個項目,需要javascript動態插入樣式,結果以前的方法失效了!查了2個小時的原因竟然是自己手賤,這個最後再說! javascript插入樣式在前端開發中應用比較廣泛,特別是在修改前端表現和頁面換膚的時候。最近做的這個任務是用戶在別人的站點上點擊一個按鈕,就會在別的站點頁面下插入一個腳本 ...


最近做一個項目,需要javascript動態插入樣式,結果以前的方法失效了!查了2個小時的原因竟然是自己手賤,這個最後再說!

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("");

  

 

 

但是在我目前做的這個項目中本身應用的樣式非常少,直接用引入一個外部樣式文件似乎不合適,所以我選擇了第二種方案,在頁面中使用<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{ color:#FFFFFF }";
includeStyleElement(styles, "newstyle");

  

 

 

這樣頁面中的元素就能直接應用css樣式了,不管你的這些元素是不是通過腳本追加的。

關於手賤:

看這段代碼:

 

複製代碼代碼如下:

 

var divObj = document.createElement("div");
divObj.id = "__div";
divObj.innerHTML = "測試js插入DOM和樣式";
document.body.appendChild(divObj);

var styles = "#__div{ color:#FFFFFF }";
includeStyleElement(styles, "newstyle");

 

  

 

前面說了這個項目是用戶在別人的站點上點擊一個按鈕,就會在別的站點頁面下插入一個腳本,執行,這其中包含了樣式的插入,我為了儘可能的保證我創建的元素ID唯一性,手賤在元素ID前加了“__”,表示私有防止衝突。結果悲劇了,IE6,IE7 class和id的命名不能以下劃線開頭(“_”),竟然把這個給忘了!花了兩個小時才找到原因。悲劇啊!得出一個結論!做前端代碼千萬不能手賤!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1.1概述 提供一種方法順序訪問一個聚合對象中的各個元素,而又不需要暴露對象的內部表示。這就是迭代器模式的定義。 合理組織數據的結構以及相關操作是程式設計的一個重要方面,比如在程式設計中經常會使用諸如鏈表、散列表等數據結構。鏈表和散列表等數據結構都是可以存放若幹個對象的集合,其區別是按照不同的方式進 ...
  • 1.UML簡介Unified Modeling Language (UML)又稱統一建模語言或標準建模語言。 簡單說就是以圖形方式表現模型,根據不同模型進行分類,在UML 2.0中有13種圖,以下是他們的主要用途簡介: 1.用例圖:對系統的使用方式分類. 2.類圖:顯示類和它們的相互關係。 3.對象 ...
  • 尾調用優化(Tail Call Optimization) 尾調用是指函數的最後一條語句是函數調用,比如下麵的代碼: 在ES5中,尾調用和其他形式的函數調用一樣:腳本引擎創建一個新的函數棧幀並且壓在當前調用的函數的棧幀上面。也就是說,在整個函數棧上,每一個函數棧幀都會被保存,這有可能造成調用棧占用內 ...
  • 在實際開發中,經常會遇到導入Excel文件的需求,有的產品人想法更多,想要在前端直接判斷文件內容格式是否正確,必填項是否已填寫 依據HTML5的FileReader,可以使用新的API打開本地文件(參考這篇文章) FileReader.readAsBinaryString(Blob|File) Fi ...
  • 通讀官方教程 (guide) 的基礎篇。不要用任何構建工具,就只用最簡單的腳本引入,把教程里的例子模仿一遍,理解用法。不推薦上來就直接用 vue-cli 構建項目,尤其是如果沒有 Node/Webpack 基礎。有了 Node 和 Webpack 的基礎,可以通過 vue-cli 來搭建基於 Web... ...
  • 之前一直聽朋友談起gulp,但沒有使用過,最近有機會接觸到,現在給大家分享下,不對的地方還請指正。我一直以為互相分享是學習的一種好方式。下麵進入正題: 首先來瞭解下gulp,最起碼要知道:我們為什麼要學它,它的優勢。gulp是前端開發過程中對代碼進行構建的工具,它不僅能對網站資源進行優化,在開發過程 ...
  • 關於Sass的基本用法 百度搜索一大推 本人是從阮一峰大神的筆記開始接觸這個玩意 傳送門 http://www.ruanyifeng.com/blog/2012/06/sass.html 來了攜程之後從代替之前做樣式的女孩子從寫css開始乾起 明天女孩度產假歸來 可以擁入js的懷抱 一片新的天地 工 ...
  • 開發項目中用到了artDialog.js,從而專門學習一下如何配置和使用。 一、artDialog是什麼 artDialog是一個精巧的web對話框組件,壓縮後只有十多KB,並且不依賴其他框架。 二、artDialog的使用 以下內容引用 http://www.2cto.com/kf/201303/ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...