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 相关文章推荐
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
用JavaScript仿PS里的羽化效果代码
Dec 20 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
JavaScript实现弹出广告功能
Mar 30 Javascript
Vue中Axios从远程/后台读取数据
Jan 21 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
Node.js文件操作详解
2014/08/16 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
深入理解Python3中的http.client模块
2017/03/29 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
JAVA及PYTHON质数计算代码对比解析
2020/06/10 Python
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
公司综合部的成员自我评价分享
2013/11/05 职场文书
办公室助理岗位职责
2013/12/25 职场文书
超市国庆节促销方案
2014/02/20 职场文书
浪费资源的建议书
2014/03/12 职场文书
暑假学习心得体会
2014/09/02 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android