index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>根据不同分辨率载入相应CSS样式表</title>

<link href="default.css" rel="stylesheet" type="text/css" />

<script>

var loadCss = (function () {

    var arrCss = [{minW: 768, maxW: 1024, src: 'style.css'}, {minW: 0, maxW: 768, src:'css.css'}];

    loadCss(arrCss);

    bindEvent(window, 'resize', function () {

        loadCss(arrCss);

    });

    function loadCss(arr) {

        var w = document.documentElement.clientWidth;

        for (var i = 0, len = arr.length; i < len; i++) {

            addCss(arr[i]);

        }

        function addCss(json) {

            var arr = document.getElementsByTagName('link');

            var oCss = null;

            var bFlag = false;

            var bAdd = false;

            for(var i = 0; i < arr.length; i++) {

                if (arr[i].getAttribute('href') == json.src) {

                    oCss = arr[i];

                    break;

                }

            }

            if (w >= json.minW && w <= json.maxW) {

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

                css.href = json.src;

                css.rel = 'stylesheet';

                css.type = 'text/css';

                insertAfter(css, arr[arr.length - 1]);

            }

            if (oCss) oCss.parentNode.removeChild(oCss);

        }

    }

})();

function bindEvent(obj, events, fn) {

    obj.addEventListener ? obj.addEventListener(events, fn, false) : obj.attachEvent('on' + events, function () { fn.call(obj); });

}

function insertAfter(newElement, targetElement) {

    var parent = targetElement.parentNode;

    if (last(parent) == targetElement) parent.insertBefore(newElement);

    else parent.insertBefore(newElement, next(targetElement));

}

function next(obj) {

    return obj.nextElementSibling || obj.nextSibling;

}

function last(obj) {

    return obj.lastElementChild || obj.lastChild;

}

</script>

</head>

<body>

</body>

</html>

default.css

body { background:black; }

style.css

body { background:red; }

css.css

body { background:green; }

根据不同分辨率载入相应CSS样式表的更多相关文章

  1. 深度理解CSS样式表，内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. CSS样式表

    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...

  3. JS 控制CSS样式表

    JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline.  ...

  4. HTML基础（三）——css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  5. DOM与CSS样式表

    在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况 通过使用 H ...

  6. 一起学HTML基础-CSS样式表-基本概念、分类、选择器

    一.基本概念: CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  7. CSS样式表继承详解

    最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...

  8. 2016年10月27日--css样式表

    CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <met ...

  9. CSS样式表 选择器

    1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...

随机推荐

  1. 将自己的框架更新到cocopods上

    为了更方便的集成第三方框架有了cocopods 的, 当我们有了相对比较好的框架的时候如何更新到cocopods 供他人参考呢? 下面我一步一步带大家开源自己的框架. 第一步 把自己的框架更新到git ...

  2. DataFrame数据批量做线性回归

    我们通常用pandas读取csv文件为DataFrame数据格式,如下图,是部分县2001年到2009年的某种作物的产量数据.我们希望求得9年的增长趋势,即求一个一元线性回归模型的斜率,这个时候便可以 ...

  3. Android中的“再按一次返回键退出程序”实现 （转） 按返回键退出程序时进行提醒

    原文地址: https://blog.csdn.net/xichenguan/article/details/47030303 最近在研究   Android  编程方面的东西, 有了以下发现,  该 ...

  4. I.MX6 Linux eGTouch TouchScreen porting

    I.MX6 Linux eGTouch TouchScreen porting 一.Download Driver: http://www.eeti.com.tw/drivers_Linux.html ...

  5. JavaScript 中 OnLoad事件用法总结

    还差一天现在手头上的这套网站就写完了,中午蹭了半天还是没睡好,干脆爬起来把今天上午写到的onload事件给整理一下. 一般用到比较多的就是初始化数据或者效果. 1.直接写在<body>标签 ...

  6. Linux 用C语言实现简单的shell(2)

    不知不觉两周没有发文了,因为“一万美金的福特奖学金答辩”,ACM比赛,网络论文阅读和网络大作业一大堆事把时间冲散了,所以先写一篇博文补上之前一坑. 之前发了一篇关于linux 用C语言实现简单shel ...

  7. Request对象主要用于获取来自客户端的数据，如用户填入表单的数据、保存在客户端的Cookie等。

    1.主要属性  ApplicationPath  获取服务器上asp.net应用程序的虚拟应用程序根路径  Browser  获取有关正在请求的客户端的浏览器功能的信息,该属性值为:HttpBrows ...

  8. python模块--随机模块

    import random print(random.random()) # 随机产生一个(0,1)的 float 0.026244299361600776 print(random.randint( ...

  9. 使用distillery 实现版本的动态升级&& 动态降级

    备注: distillery  使用很棒的elixir 打包构建工具,下面演示的是升级以及降级   1. 参考项目 https://github.com/rongfengliang/phoenix-r ...

  10. 微信开发 api 需要 https 服务器

    微信开发 api 需要 https 服务器 先建一个环境,本地的 https 服务器. 以下这篇不错,很完整. https://zhuanlan.zhihu.com/p/23640321