JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码


Posted in Javascript onJanuary 23, 2013

最近看一个网站,发现显示器不同的分辨率,样式文件调用的也不一样,今天写了一个例子研究一下,

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>无标题文档</title> 
<link rel="stylesheet" id="sc" type="text/css" href="css/c1.css"/> 
<script type="text/javascript"> 
window.onload=function(){ 
var sc=document.getElementById("sc"); 
var d=document.getElementById("d"); 
if(screen.width>1024) //获取屏幕的的宽度 
{ 
sc.setAttribute("href","css/c2.css"); //设置css引入样式表的路径 
d.innerHTML = "你的电脑屏幕宽度大于1024,我的宽度是 1200px, 背景色现在是红色。"; 
} 
else{ 
sc.setAttribute("href","css/c1.css"); 
d.innerHTML = "你的电脑屏幕宽度小于或是等于1024,我的宽度是 960px, 背景色现在是蓝色。"; 
} 
} 
</script> 
</head> 
<body> 
<div id="d"></div> 
</body> 
</html>

c1.css里面的内容
*{ margin:0; padding:0;} 
div{ width:960px; height:400px; margin:0 auto; background:blue; color:#ffffff;}

c2.css里面的内容
*{ margin:0; padding:0;} 
div{ width:1200px; height:400px; margin:0 auto; background:red; color:#fff;}
Javascript 相关文章推荐
javascript js cookie的存储,获取和删除
Dec 29 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
JavaScript接口实现方法实例分析
May 16 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 #Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 #Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 #Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 #Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 #Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 #Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 #Javascript
You might like
JS实现php的伪分页
2008/05/25 PHP
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
JavaScript中获取元素索引的函数
2010/09/10 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
Python中非常实用的一些功能和函数分享
2015/02/14 Python
Python实现代码统计工具(终极篇)
2016/07/04 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
python调用百度REST API实现语音识别
2018/08/30 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
python读取与处理netcdf数据方式
2020/02/14 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
百思买美国官网:Best Buy
2016/07/28 全球购物
linux面试题参考答案(4)
2014/09/21 面试题
教师实习的自我鉴定
2013/10/26 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
python全面解析接口返回数据
2022/02/12 Python
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript