根据不同分辨率载入相应CSS样式表
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样式表的更多相关文章
- 深度理解CSS样式表,内有彩蛋....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS样式表
CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...
- JS 控制CSS样式表
JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline. ...
- HTML基础(三)——css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- DOM与CSS样式表
在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况 通过使用 H ...
- 一起学HTML基础-CSS样式表-基本概念、分类、选择器
一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- CSS样式表继承详解
最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...
- 2016年10月27日--css样式表
CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <met ...
- CSS样式表 选择器
1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...
随机推荐
- 你离BAT之间,只差这一套Java面试题
最近,各大公司开始了春招,很多人已经开始在准备面试了,特地来总结下初中级程序员应该掌握的面试题目.这篇面试指南,只适用于初中级程序员,其中不涉及分布式等问题.关于中高级的程序员问题,我后面可能再出一篇 ...
- ScrollView中嵌套ExpandableListView
为了让SrollView中嵌套ExpandableListView,我们就得改ListView的高度,所以写一个类继承于ExpandableListview: import android.conte ...
- 用户空间与内核驱动的交互过程 — ioctl
在Linux内核模块的开发过程中,经常涉及到运行在用户空间上的应用程序与内核模块进行交互,ioctl系统调用是常用的一种方式.本文并不涉及vlan的具体原理,仅通过vconfig与vlan内核模块进行 ...
- SEO - H标签
前言 这两天在做网站的SEO.虽然之前SEO的资料看过很多,但是因为正职是美工的缘故,SEO的具体实施参与的较少.现在的公司有点特殊,SEO团队基本不懂代码,所以需要参与的比较多.以下内容主要是通过自 ...
- 使用jenkins持续集成自动化测试
本文采用Springboot开发一个简易的添加个人资料和查询个人资料接口,并采用testng进行测试,使用jenkis进行持续继承,allure输出测试报告. 个人资料查询接口开发(集成H2数据库) ...
- GraphQL和RESTful的区别
GraphQL和RESTful的区别 http://graphql.cn/learn/ https://www.cnblogs.com/Wolfmanlq/p/9094418.html http:// ...
- 【DUBBO】 Dubbo生成的设配类
package com.alibaba.dubbo.rpc;import com.alibaba.dubbo.common.extension.ExtensionLoader;public class ...
- 【Netty】netty学习之nio了解
[一]五种IO模型: (1)阻塞IO(2)非阻塞IO(任务提交,工作线程处理,委托线程等待工作线程处理结果的同时,也可以做其他的事情)(3)IO复用模型.(委托线程接收多个任务,将任务提交给工作线程. ...
- 【DUBBO】Dubbo:monitor的配置
[一]:配置项 <dubbo:monitor protocol="registry"/> [二]:配置解析器-->具体解析器为com.alibaba.dubbo. ...
- 洛谷 P1022 计算器的改良
题解:字符串模拟 坑点: 1) 0/-1=-0. 这是因为(来自洛谷讨论区某大犇) double下存储的数字会有精度误差,比如0可能被存成0.000000000...01然而如果你乘上或者除以一个负数 ...