21.動態加載腳本和樣式

動態加載腳本和樣式

 

學習要點：

1.元素位置

2.動態腳本

3.動態樣式

 

本章主要講解上一章剩餘的獲取位置的DOM方法，動態加載腳本和樣式。

 

1、元素位置

 

上一章已經經過幾組屬性能夠獲取所需的位置，那麼這幾課補充一個DOM的方法：getBoundingClientRect()。

這個方法返回一個矩形對象，包含四個屬性：left、top、right和bottom，分別表示元素各邊與

頁面上邊和左邊的距離。

 

var box = document.getElementById('box'); //獲取元素

alert(box.getBoundingClientRect().top); //元素上邊距離頁面上邊的距離

alert(box.getBoundingClientRect().right); //元素右邊距離頁面左邊的距離

alert(box.getBoundingClientRect().bottom); //元素下邊距離頁面上邊的距離

alert(box.getBoundingClientRect().left); //元素左邊距離頁面左邊的距離

 

PS：IE、Firefox3.0+、Opera9.五、Chrome、Safari支持，在IE中，默認座標從（2,2）開始計算

，致使最終距離比其餘瀏覽器多出兩個像素，咱們須要作個兼容。

document.documentElement.clientTop; //非IE爲0 ，IE爲2

document.documentElement.clientLeft; //非IE爲0 ，IE爲2

 

 

function getRect(element){

var rect = element.getBoundingClientRect();

var top = document.documentElement.clientTop;

var left = document.documentElement.clientLeft;

}

 

window.onload = function(){

 

alert(getRect(box).top);

alert(getRect(box).right);

alert(getRect(box).bottom);

alert(getRect(box).left);

 

function getRect(element){

var rect = element.getBoundingClientRect();

var top = document.documentElement.clientTop;

var left = document.documentElement.clientLeft;

 

return {

top : rect.top-top,

bottom : rect.bottom-top,

left : rect.left-left,

right : rect.right-left;

}

}

}

 

PS：分別加上外邊距、內邊距、邊框和滾動條，用於測試全部瀏覽器是否一致。

 

 

 

 

 

 

2、動態腳本

 

當網站需求變大，腳本的須要也隨之增大，咱們就不得不引入太多的JS腳本而下降了整站的性

能，因此就出現了動態腳本的概念，在適時的時候加載相應的腳本。

好比：咱們想在須要檢測瀏覽器的時候，再引入檢測文件。

var flag = true; //設置true再加載，若是flag爲真，那麼就加載JS腳本

if(flag){

loadScript('browserdetect.js')//設置加載的js

}

 

function loadScript(url){

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

script.type = 'text/javascript';

script.src = url;

//document.head.appendChild(script);

document.getElementsByTagName('head')[0].appendChild(script);

}

 

 

window.onload = function(){

var flag = true;

if(flag){

loadScript('browserdetect.js');

}

 

function loadScript(url){

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

script.type = 'text/javascript';

script.src = url;

document.getElementsByTagName('head')[0].appendChild(script);

}

}

 

PS：document.head調用，IE不支持，會報錯！

 

//動態執行JS

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

script.type = 'text/javascript';

var text = document.createTextNode("alert('Lee')");

script.appendChild(text);

document.getElementsByTagName('head')[0].appendChild(script);

//其中的var text = document.createTextNode("alert('Lee')"); IE瀏覽器會報錯

 

PS：IE瀏覽器認爲script是特殊元素，不能在訪問子節點。爲了兼容，可使用text屬性來代替

script.text = "alert('')"; //IE能夠支持

 

window.onload = function(){

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

script.type = 'text/javascript';

script.text = "alert('journey')";

document.getElementsByTagName('head')[0].appendChild(script);

}

 

PS：固然，若是不支持text，那麼就能夠針對不一樣的瀏覽器特性來是喲個不一樣的方法。這裏就

忽略寫法了。

 

 

 

 

 

3、動態樣式

爲了動態的加載樣式表，好比切換網站皮膚，樣式表有兩種方式進行加載，一種是<link>標籤

，一種時<style>標籤。

//動態執行link

var flag = true;

if(flag){

loadScript('basic.js');

}

 

function loadScript(url){

var link = document.createElement('link');

link.type = 'text/css';

link.rel = 'stylesheet';

link.href = url;

document.getElementsByTagName('head')[0].appendChild(link);

}

 

 

//動態執行style

var flag = true;

if(flag){

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

style.type = 'text/css';

//var box = document.createTextNode(#box{background:red}');IE不支持

//style.appendChild(box);

document.getElementsByTagName('head')[0].appendChild(style);

insertRule(document.styleSheets[0], '#box' , 'background:red' ,0);

}

 

function insertRule(sheet,selectorText,cssText,position){

//若是是非IE

if(sheet.insertRule){

sheet.insertRule(selectorText + "{" + cssText + "}" ,position);

//若是是IE

}else if(sheet.addRule){

sheet.addRule(selectorText,cssText,position);

}

}