JavaScript 动态加载脚本和样式

 

3大点:

1.元素位置

2.动态脚本

3.动态样式

 

 

一.元素位置

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:分别加上外边据、内边距、边框和滚动条,用于测试所有浏览器是否一致。

 

 

二.动态脚本

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{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);

}

}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

时间: 2015-07-20

JavaScript 动态加载脚本和样式的相关文章

JavaScript 动态加载脚本和样式的方法_javascript技巧

一 动态脚本 当网站需求变大,脚本的需求也逐步变大;我们不得不引入太多的JS脚本而降低了整站的性能; 所以就出现了动态脚本的概念,在适时的时候加载相应的脚本; 1.动态引入js文件 var flag = true; if(flag){ loadScript('browserdetect.js'); // 调用函数,引入路径; } function loadScript(url){ var script = document.createElement('script'); // 创建script

动态加载脚本提升javascript性能

 动态加载脚本可以有效提升javascript性能,下面有个不错的示例,大家可以参考下 通过文档对象模型(DOM),几乎可以用Javascript动态创建HTML中的所有 内容.其根本在于,<script>标签与页面中的其他元素并无差异:都能通过DOM引用,都能在文档中移动.删除,甚至被创建.用标准的DOM方法可以非常容易地创建一个新年的<script>元素:   代码如下: <script type="text/javascript">  var

JavaScript动态加载样式表的方法_javascript技巧

本文实例讲述了JavaScript动态加载样式表的方法.分享给大家供大家参考.具体如下: 如果需要更换皮肤,我们可以通过JS代码动态加载皮肤的样式表,下面的代码就可以做到,非常简单,你只需要把这段代码做成函数动态调用即可. var el = document.createElement('link'); el.rel = 'stylesheet'; el.type = 'text/css'; el.href = 'http://www.jb51.net/...' + 'styles.css';

javascript动态加载js脚本几种方法

javascript动态加载js脚本 1.直接document.write  代码如下 复制代码 <script language="javascript">     document.write("<script src='test.js'></script>"); </script> 2.动态改变已有script的src属性  代码如下 复制代码 <script src='' id="s1"

JS动态加载脚本并执行回调操作_javascript技巧

关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解怎么在js中加载其它js文件并在加载完成后执行回调函数.  我们可以动态的创建 <script> 元素,然后通过更改它的 src 属性来加载脚本,但是怎么知道这个脚本文件加载完成了呢,因为我们有些函数需要在脚本加载完成生效后才能开始执行. 经过对网络上资源的搜索,我发现在 IE 浏览器中可以使用

jquery ajax()动态加载脚本文件的例子

上次说的jquery动态加载脚本,使用的是getScript(您可以点击相关文章查看),缺点和优点都说了.封装的函数是不自带缓存功能的,默认每次加载都刷新本地脚本.这样的一个特点对于网速不是很快的网站来说,那就是一个漫长的等待,虽然页面已经加载完毕了,但脚本还在路上,访客会以为脚本加载失败,就会反复的刷新页面,结果每次加载脚本都是重新获取的,造成资源的中断和大量的服务器请求.为了解决这个问题,我自己写了个方法,哈哈,当然是根据getScript把ajax方法打包到一个函数里便于多次复用. <!D

超级强大JS动态加载脚本同时使用加载js文件函数调用

    首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在里面写一个方法functionOne,很简单,代码如下: function functionOne(){     alert("成功加载"); }         后面的html文件都创建在同一个目录下. 方法一:直接document.write 在同一个文件夹下面创建一个function1.html,代码如下: <html> <head>     <ti

JavaScript动态加载CSS的三种方法

css|javascript|动态|加载 如果你有很多关联的CSS文件要一起加载,或者想动态的加载不同的CSS文件,那么下面的方法你一定对你有帮助. 第一种:一般用在外部CSS文件中加载必须的文件 程序代码@import url(style.css);/*只能用在CSS文件中或者style标签中*/ 第二种:简单的在页面中加载一个外部CSS文件  程序代码document.createStyleSheet(cssFile); 第三种:用createElement方法创建CSS的Link标签  程

如何实现JavaScript动态加载CSS和JS文件_javascript技巧

项目中需要用到动态加载CSS 文件,整理了一下,顺便融合了动态加载JS 的功能写成了一个对象,先上代码: var dynamicLoading = { css: function(path){ if(!path || path.length === 0){ throw new Error('argument "path" is required !'); } var head = document.getElementsByTagName('head')[0]; var link =