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. [Math]Pi(1)

    数学知识忘地太快,在博客记录一下pi的生成. 100 Decimal places 3.14159265358979323846264338327950288419716939937510582097 ...

  2. Django model.py表单设置默认值允许为空

    blank=True 默认值为blank=Flase,表示默认不允许为空, blank=True admin级别可以为空   null=True 默认值为null=Flase,表示默认不允许为空 nu ...

  3. table中文字过长使用省略号

    1.设置table固定布局,否则自适应布局会不受控制 table{ table-layout: fixed; } 2.设定td宽度占比 <table> <col width=&quo ...

  4. Codeforces 815C. Karen and Supermarket【树形DP】

    LINK 思路 首先发现依赖关系是一个树形的结构 然后因为直接算花多少钱来统计贡献不是很好 因为数组开不下 那就可以算一个子树里面选多少个的最小代价就可以了 注意统计贡献的时候用优惠券的答案只能在1号 ...

  5. Viterbi算法和隐马尔可夫模型（HMM）算法

    隐马尔可夫模型(HMM)及Viterbi算法 https://www.cnblogs.com/jclian91/p/9954878.html HMM简介   对于算法爱好者来说,隐马尔可夫模型的大名那 ...

  6. IOS SEL (@selector) 原理及使用总结（二）

    SEL消息机制工作原理是什么 引用下面文章: 我们在之前有提到,一个类就像一个 C 结构.NSObject 声明了一个成员变量: isa. 由于 NSObject 是所有类的根类,所以所有的对象都会有 ...

  7. 剑指offer第七章&第八章

    剑指offer第七章&第八章 1.把字符串转换成整数 将一个字符串转换成一个整数,要求不能使用字符串转换整数的库函数. 数值为0或者字符串不是一个合法的数值则返回0 输入描述: 输入一个字符串 ...

  8. 《DSP using MATLAB》示例Example6.2

    2017年了,阳历新年都11号了,已从外地回到家乡,依然苦逼的生活…… 接着写读书(Digital Signal Processing using MATLAB)笔记吧 代码: b = [1 -3 1 ...

  9. 隐藏控件HiddenField使用

    HiddenField控件顾名思义就是隐藏输入框的服务器控件,它能让你保存那些不需要显示在页面上的且对安全性要求不高的数据. 增加HiddenField,其实是为了让整个状态管理机制的应用程度更加全面 ...

  10. 洛谷P1309 瑞士轮

    传送门 题目大意: 2*n个人,有初始的比赛分数和实力值. 每次比赛前总分从大到小排序,总分相同编号小的排在前面. 每次比赛是1和2比,3和4比,5和6比. 实力值大的获胜得1分. 每次比赛前排序确定 ...