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


一個月沒來寫文章了,最近在看C#想改寫一下C#文章。不過本來文筆實在有限無法像大神那樣一個個寫出的博客把一個技術都寫透了,連原理都寫出來分享,本人菜鳥水平有限,所有就寫出一點我們都比較好容易理解的來(我自己能理解的)。
前提:我們可以把一個網頁里面的內容理解為一個XML或者說網頁本身也就是一個XML文檔,XML文檔都有很特殊的象征:"標簽"也叫"節點"。我們都知道一個基本的網頁格式是
<!DOCTYPE />
<head></head>
<body><body />
這些是最基本的形態,但是其實它省略了最外面的一個標簽<document>.
<document>
       <!DOCTYPE />
<head></head>
<body><body />
</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);
}
 
很簡單的代碼清單,概述就是創建一個標簽,設置一下屬性,添加一下內容,放到該放的位置上。
 
   寫這一份博客的時候其實在糾結這到底要不要寫呢?最后我還是厚着臉皮寫下去了,大神們寫的博客給我壓力太大了。但是又想讓大家都知道我在努力,出來實習快四個月了。每天都在看書,不斷的讀取知識,不容易,希望有看到我這些文章的朋友們,能挺一下我,不為我寫的東西,為我的努力肯定一下吧。程序員不好做,但我選擇了它就不要后悔。為自己,請叫我程序員!
 
附加:有什么錯誤點的話,望大神們指點。批評才能知錯,指點才能進步!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM