JavaScript的动态加载脚本和样式

时间 2021-01-02

标签 javascript css java 浏览器 app ide 性能测试网站 url 栏目 JavaScript 繁體版

原文原文链接

本章主要讲解上一章剩余的获取位置的DOM 方法、动态加载脚本和样式。javascript

一．元素位置
上一章已经经过几组属性能够获取元素所需的位置，那么这节课补充一个DOM 的方
法：getBoundingClientRect()。这个方法返回一个矩形对象，包含四个属性：left、top、right
和bottom。分别表示元素各边与页面上边和左边的距离。css

  
  
           
  
  
   
   
            
   
   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.五、Chrome、Safari 支持，在IE 中，默认坐标从(2,2)开始计
算，致使最终距离比其余浏览器多出两个像素，咱们须要作个兼容。java

  
  
           
  
  
   
   
            
   
   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 脚本而下降了
整站的性能，因此就出现了动态脚本的概念，在适时的时候加载相应的脚本。
好比：咱们想在须要检测浏览器的时候，再引入检测文件。app

  
  
           
  
  
   
   
            
   
   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 不支持，会报错！ide

  
  
           
  
  
   
   
            
   
   //动态执行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); 
   
   
            
   
   } 
   
   
            
   
   }