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 相关文章推荐
jQuery Tools tab使用介绍
Jul 14 Javascript
jquery处理json对象
Nov 03 Javascript
使用Sticker.js实现贴纸效果
Jan 28 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
如何基于js判断浏览器版本
Feb 20 Javascript
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
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
jQuery select的操作实现代码
2009/05/06 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
react-native 实现购物车滑动删除效果的示例代码
2021/01/15 Javascript
Python中用format函数格式化字符串的用法
2015/04/08 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
测量工程专业求职信
2014/02/24 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
个性婚礼策划方案
2014/05/17 职场文书
小学见习报告
2014/10/31 职场文书
工作检讨书范文
2015/01/23 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫