编程 Javascript

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;}

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript iframe内的函数调用实现方法

Jul 19 Javascript

使用ExtJS技术实现的拖动树结点

Aug 05 Javascript

js改变文章字体大小的实例代码

Nov 27 Javascript

javascript实现在网页任意处点左键弹出隐藏菜单的方法

May 13 Javascript

jQuery学习心得总结(必看篇)

Jun 10 Javascript

微信小程序向左滑动删除功能的实现

Mar 10 Javascript

微信小程序页面跳转如何实现传值

Apr 05 Javascript

详解React 在服务端渲染的实现

Nov 16 Javascript

详解JS实现简单的时分秒倒计时代码

Apr 25 Javascript

js实现右键弹出自定义菜单

Sep 08 Javascript

vue 通过 Prop 向子组件传递数据的实现方法

Oct 30 Javascript

微信小程序调用后台service教程详解

Nov 06 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