JavaScript的动态加载脚本和样式
2013-01-30 17:07
423 查看
本章主要讲解上一章剩余的获取位置的DOM 方法、动态加载脚本和样式。
一.元素位置
上一章已经通过几组属性可以获取元素所需的位置,那么这节课补充一个DOM 的方
法:getBoundingClientRect()。这个方法返回一个矩形对象,包含四个属性:left、top、right
和bottom。分别表示元素各边与页面上边和左边的距离。
PS:IE、Firefox3+、Opera9.5、Chrome、Safari 支持,在IE 中,默认坐标从(2,2)开始计
算,导致最终距离比其他浏览器多出两个像素,我们需要做个兼容。
PS:分别加上外边据、内边距、边框和滚动条,用于测试所有浏览器是否一致。
二.动态脚本
当网站需求变大,脚本的需求也逐步变大。我们就不得不引入太多的JS 脚本而降低了
整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本。
比如:我们想在需要检测浏览器的时候,再引入检测文件。
PS:document.head 调用,IE 不支持,会报错!
PS:IE 浏览器认为script 是特殊元素,不能在访问子节点。为了兼容,可以使用text
属性来代替。
PS:当然,如果不支持text,那么就可以针对不同的浏览器特性来使用不同的方法。这
里就忽略写法了。
三.动态样式
为了动态的加载样式表,比如切换网站皮肤。样式表有两种方式进行加载,一种是<link>
标签,一种是<style>标签。
一.元素位置
上一章已经通过几组属性可以获取元素所需的位置,那么这节课补充一个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+、Opera9.5、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; return { top : rect.top - top, bottom : rect.bottom - top, left : rect.left - left, right : rect.right - left } }
PS:分别加上外边据、内边距、边框和滚动条,用于测试所有浏览器是否一致。
二.动态脚本
当网站需求变大,脚本的需求也逐步变大。我们就不得不引入太多的JS 脚本而降低了
整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本。
比如:我们想在需要检测浏览器的时候,再引入检测文件。
var flag = true; //设置true 再加载 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.head 表示<head> 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')"); //IE 浏览器报错 script.appendChild(text); document.getElementsByTagName('head')[0].appendChild(script);
PS:IE 浏览器认为script 是特殊元素,不能在访问子节点。为了兼容,可以使用text
属性来代替。
script.text = "alert('')"; //IE 可以支持了。
PS:当然,如果不支持text,那么就可以针对不同的浏览器特性来使用不同的方法。这
里就忽略写法了。
三.动态样式
为了动态的加载样式表,比如切换网站皮肤。样式表有两种方式进行加载,一种是<link>
标签,一种是<style>标签。
//动态执行link var flag = true; if (flag) { loadStyles('basic.css'); } function loadStyles(url) { var link = document.createElement('link'); link.rel = 'stylesheet'; link.type = 'text/css'; 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{red}'); IE 不支持< /span> //style.appendChild(box); document.getElementsByTagName('head')[0].appendChild(style); insertRule(document.styleSheets[0], '#box', 'red'< /span>, 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); } }
相关文章推荐
- Javascript动态加载脚本与样式
- 【JavaScript】动态加载脚本和样式
- JavaScript 动态加载脚本和样式的方法
- 第一百一十八节,JavaScript,动态加载脚本和样式
- javaScript笔记(十九) 动态加载脚本和样式
- javascript基础:动态加载脚本和样式
- JavaScript学习10:动态加载脚本和样式
- JavaScript--动态加载脚本和样式(23)
- JavaScript 动态加载脚本和样式
- JavaScript 动态加载脚本和样式的方法
- javascript笔记--(第二十三章)动态加载脚本和样式
- javascript动态加载脚本和样式
- JavaScript学习10:动态载入脚本和样式
- 动态加载脚本提升javascript性能
- javascript中动态加载js、vbs脚本或者css样式表
- 动态加载脚本和样式
- 如何运行时(动态)加载js脚本|JavaScript
- javascript中动态加载js、vbs脚本或者css样式表
- 如何动态加载Javascript脚本
- 动态加载脚本和样式(转)