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. runtime 知识点

    demo https://github.com/ZOYOOPlus/runtime2 // //  ViewController.m //  runtime //  Copyright © 2017年 ...

  2. Java之OO的特性与原则

    OO(Object-Oriented)面向对象     面向对象,有三个特性.五个原则之说. 特性 封装     顾名思义,封装就好比一个黑盒子,内部被隐藏,只有几个接口与外界相连.具体来说,所谓封装 ...

  3. mysql的master和slave同步方案

    同步原理 master将改变记录到二进制日志(binary log)中 slave将master的binary log events拷贝到它的中继日志(relay log) slave重做中继日志中的 ...

  4. CF1117A Best Subsegment

    CF1117A Best Subsegment 乍一看好像很难,仔细想一下发现就是弱智题... 任意一段平均数显然不会超过最大的数,若只取最大数即可达到平均数为最大数. 于是只用取最长的一段连续的最大 ...

  5. Codeforces 808G Anthem of Berland【KMP】【DP】

    LINK 简要题意 给你一个串s,上面有字母和一些通配符,问你将通配符换成字母之后最多可以出现多少次串t 首先有一个很傻子的做法就是\(dp_{i,j}\)表示s到第i个位置匹配t串前j个字符的完整t ...

  6. ASP.NET Core 中的SEO优化（2）：中间件中渲染Razor视图

    前言 上一篇文章<ASP.NET Core 中的SEO优化(1):中间件实现服务端静态化缓存>中介绍了中间件的使用方法.以及使用中间件实现服务端静态化缓存的功能.本系列文章的这些技巧都是我 ...

  7. 数学杂烩总结(多项式/形式幂级数+FWT+特征多项式+生成函数+斯特林数+二次剩余+单位根反演+置换群)

    数学杂烩总结(多项式/形式幂级数+FWT+特征多项式+生成函数+斯特林数+二次剩余+单位根反演+置换群) 因为不会做目录所以请善用ctrl+F 本来想的是笔记之类的,写着写着就变成了资源整理 一些有的 ...

  8. {Reship}{Socket}C#简单应用

    This article come frome here ======================================================================= ...

  9. python模块--随机模块

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

  10. cockpit 使用(集成docker && k8s 管理)

    1. yum 安装 sudo yum install cockpit 2. 允许启动 sudo systemctl enable --now cockpit.socket 3. 可选的插件 cockp ...