学习要点：

1.元素位置

2.动态脚本

3.动态样式

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

 

一．元素位置

上一章已经通过几组属性可以获取元素所需的位置，那么这节课补充一个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('Dkf')"); //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);

}

}

JavaScript(第二十二天)【动态加载js和css】的更多相关文章

  1. 动态加载js和css

    开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { v ...

  2. 动态加载js和css的jquery plugin

    一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include ...

  3. 动态加载js、css 代码

    一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param ...

  4. 移动端性能优化动态加载JS、CSS

    JS CODE (function() { /** * update: * 1.0 */ var version = "insure 1.1.0"; var Zepto = Zep ...

  5. js插件动态加载js、css解决方案

    最近因为工作需要做了一个js自动导入的插件,一开始很天真的以为动态创建个script添加到head中就ok了,试了之后才发现了问题,就是如果同时引入了多个js文件,而且后一个文件中用到了前一个文件中的 ...

  6. 动态加载JS（css）文件

    <script language="javascript">document.write("<script src='test.js'><\ ...

  7. 动态加载JS 和 CSS

    <script type="text/javascript"> $(function () { var filename = '/assets/css/main.css ...

  8. 动态加载js css 插件

    简介 动态加载js,css在现在以及将来肯定是很重要的.目前来看前端代码编写的业务量已经远远超过后端编写的.随着对用户体验度逐渐增强,前端业务复杂,加载速度变得很慢很慢.为了解决这个问题,目前出现的两 ...

  9. javascript动态加载js文件主流浏览器兼容版

    一.代码示例: <html> <head> <meta http-equiv="Content-Type" content="text/ht ...

随机推荐

  1. Reactor-反应器模式

    Reactor模式:反应器模式,是高性能网络服务器中最为常用的一种模式,libevent,muduo,libuv等网络库都是以 Reactor模式构建.Reactor模式由同步事件多路分解器和具体事件 ...

  2. 安卓中webview读取html，同时嵌入Flex的SWF，交互

    安卓中webview读取html,同时嵌入Flex的SWF,交互 安卓activity与html交互很简单,用javascript接口即可,网上一堆的例子,基本上没多大问题. 在html里面嵌入swf ...

  3. 【BZOJ2005】【NOI2010】能量采集（莫比乌斯反演，容斥原理）

    [BZOJ2005][NOI2010]能量采集(莫比乌斯反演,容斥原理) 题面 Description 栋栋有一块长方形的地,他在地上种了一种能量植物,这种植物可以采集太阳光的能量.在这些植物采集能量 ...

  4. [HNOI2013]切糕

    题目描述 网址:https://daniu.luogu.org/problemnew/show/3227 大意: 平面上有一长方体,目标为将其切割为上下两半. 切割点为\((x,y,z)\)的点,每个 ...

  5. .NET微服务 容器化.NET应用架构指南（支持.NET Core2）

    介绍 企业通过使用容器,日益实现成本节约.解决部署问题并改进 DevOps 和生产操作. 通过创建 Azure 容器服务.Azure Service Fabric 等产品,同时与 Docker.Mes ...

  6. 基于Redis的简单分布式锁的原理

    参考资料:https://redis.io/commands/setnx 加锁是为了解决多线程的资源共享问题.Java中,单机环境的锁可以用synchronized和Lock,其他语言也都应该有自己的 ...

  7. gulp配置

    /* gulp配置 */ /* gulp配置 */ var gulp = require('gulp'), concat = require('gulp-concat'), rename = requ ...

  8. assert断言检测

    assert 是宏,非函数,包含在assert.h 头文件中. 如果其后面括号里的值为假,则程序终止运行,并提示出错.这个 宏只在 Debug 版本上起作用,而在 Release 版本被编译器完全优化 ...

  9. which framework or library is best to use WebRTC

    which framework or library is best to use WebRTC http://stackoverflow.com/questions/24857637/current ...

  10. Starting a Gradle Daemon, 5 busy and 1 incompatible and 1 stopped Daemons could not be reused, use --status for details FAILURE: Build failed with an exception. * What went wrong: Could not dispatch

    执行gradle build出的问题,查看hs_err_pid11064.log日志文件发现,是电脑的RAM不足导致