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. VS 工具箱 Dev控件显示

    工具箱修复Dev控件显示 用VS2010新打开一个项目,居然发现工具箱里边没了Dev控件. 命令提示符定位到Dev控件的安装目录下的\Components\Tools文件夹下,执行如下命令 添加:To ...

  2. 安装hadoop 2.2.0

    安装环境为 CentOS 64位系统, 大概分下面几个步奏, 0. 安装JDK1. 配置SSH2. 配置/etc/hosts3. 拷贝hadoop包到没台机器上4. 修改hadoop配置文件5. 关闭 ...

  3. HDU2604 Queuing 矩阵初识

    Queues and Priority Queues are data structures which are known to most computer scientists. The Queu ...

  4. hiho 1612

    emmmmm?A不了?90分是什么鬼 #include<cstdio> #include<cstdlib> #include<vector> #include< ...

  5. spring beans 源码解读

    从把spring下下来,导入到eclipse,花了几个小时的时间. 本来壮志雄心的说要,满满深入学习研读spring源码,现在看来还是不太现实,太难懂了,各种依赖,说明都是英文,整个串起来理解,深入研 ...

  6. Codeforces 828C String Reconstruction【并查集巧妙运用】

    LINK 题目大意 给你n个串和在原串中的出现位置,问原串 思路 直接跑肯定是GG 考虑怎么优化 因为保证有解,所以考虑过的点我们就不再考虑 用并查集维护当前每个点之后最早的没有被更新过的点 然后就做 ...

  7. BZOJ 2530 Poi2011 Party 【枚举】

    BZOJ 2530 Poi2011 Party Description Byteasar intends to throw up a party. Naturally, he would like i ...

  8. BZOJ4540 Hnoi2016 序列 【莫队+RMQ+单调栈预处理】*

    BZOJ4540 Hnoi2016 序列 Description 给定长度为n的序列:a1,a2,-,an,记为a[1:n].类似地,a[l:r](1≤l≤r≤N)是指序列:al,al+1,-,ar- ...

  9. Windows 10 自带那么多图标，去哪里找呢？

    无意间发现我的 D 盘根目录中大部分的文件夹都是系统专用文件夹,有自己的独特图标,偶有一两个开发用的文件夹是默认图标.于是想把它们改成独特样式,而且是 Windows 10 那些新图标样式! 这是我的 ...

  10. C#/.NET 匿名函数会捕获变量，并延长对象的生命周期

    小伙伴在一次垃圾回收中,发现对象并没有被回收掉,而注释掉一句代码后它便能够回收. 这究竟是为什么? 不关心探索过程的就直接拉到最后看结论吧!   探索 测试代码是这样的: private void O ...