JS學習之動態加載script和style樣式

時間 2019-11-13

標籤學習動態加載 script style 樣式欄目 JavaScript 简体版

原文原文鏈接

一個月沒來寫文章了，最近在看C#想改寫一下C#文章。不過原本文筆實在有限沒法像大神那樣一個個寫出的博客把一個技術都寫透了，連原理都寫出來分享，本人菜鳥水平有限，全部就寫出一點咱們都比較好容易理解的來(我本身能理解的)。

前提：咱們能夠把一個網頁裏面的內容理解爲一個XML或者說網頁自己也就是一個XML文檔，XML文檔都有很特殊的象徵:"標籤"也叫"節點"。咱們都知道一個基本的網頁格式是

<!DOCTYPE />

這些是最基本的形態，可是其實它省略了最外面的一個標籤<document>.

<!DOCTYPE />

</document>

這其實才是它的原本面目（默認吧document標籤給省略了）。是否是感受有什麼不同的呢？這下子就好理解的多了。document.body 或者docment.head,不管你的什麼操做只要是有關於這個<document>標籤的你跟能夠利用document得到，由於它是根。在看一下你所寫的網頁文檔，記住任何存在<document>標籤裏面都是能夠得到的，記得麼在節點類型中有document這種類型，全部的節點其實都是已經被分類好的，知識它們的nodeType和nodeName不同而已(能夠查一下資料"節點類型")。有點跑題，如今來看一下具體的代碼（省略版的）以下:

//動態加載腳本

function loadScript(){

var script=document.createElement("script");

script.type="text/javascript";

script.src=null

try{

script.appendChild(document.createTextNode("//code")); //javascript內容是利用createTextNode建立的（不過IE不認這個）

}catch(ex){

script.text="//code"; //IE認爲SCRIPT節點是個特殊的節點全部有個特殊的text屬性

}

document.body.appendChild(script); /*兼容IE*/

}

樣式的：

// 動態記載樣式

function loadStyle(){

var style=document.createElement("style");

style.type="text/css"; //參考網頁上的style樣式，它的屬性設置成什麼樣的這裏面也設成什麼樣的

style.href="style.css";

try{

style .appendChild(document.createTextNode("//style code"));

}catch(ex){

style.styleSheet.styleText="//style code"; /*兼容IE*/ //IE也認爲style節點是個特殊的節點全部有個特殊的 styleSheet.styleText屬性 - -

}

var head=document.getElementByTagName("head")[0];

head.appchild(link);

}

很簡單的代碼清單，概述就是建立一個標籤，設置一下屬性，添加一下內容，放到該放的位置上。

寫這一份博客的時候其實在糾結這到底要不要寫呢？最後我仍是厚着臉皮寫下去了，大神們寫的博客給我壓力太大了。可是又想讓你們都知道我在努力，出來實習快四個月了。天天都在看書，不斷的讀取知識，不容易，但願有看到我這些文章的朋友們，能挺一下我，不爲我寫的東西，爲個人努力確定一下吧。程序員很差作，但我選擇了它就不要後悔。爲本身，請叫我程序員！

附加：有什麼錯誤點的話，望大神們指點。批評才能知錯，指點才能進步！