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

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


代码如下:

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

赞 (0)

相关推荐

  • 通过js判断访客显示器屏幕分辨率并给出提示

    通过js判断访客显示器屏幕分辨率并给出提示 先给出代码示例: 完全适合做您的桌面")} else if(fh不适合做您的桌面")} else {document.write("裁剪以后适合做您的桌面")} } else if(fw尺寸略小,不适合做您电脑的桌布")} else if(fw>uw){ if (fw/fh==uw/uh) {document.write("适合做您的桌面")} else {document.write(

  • js判断屏幕分辨率的代码

    一般我们可以通过下面的代码判断分辨率 复制代码 代码如下: <script language="JavaScript">  <!-- Begin  function redirectPage() {  var wjb51=screen.width;var hjb51=screen.height;alert("经系统检测,你的屏幕分辨率为 " + wjb51+"*"+ hjb51 + "by 我们jb51.net&quo

  • JS测试显示屏分辨率以及屏幕尺寸的方法

    如何用JS特效显示自己的屏幕分辨率以及屏幕尺寸呢?请看下面一段代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • 用js自动判断浏览器分辨率的代码

    复制代码 代码如下: <SCRIPT LANGUAGE="JavaScript"> <!-- if (window.navigator.userAgent.indexOf("MSIE")>=1) { var IE1024=""; var IE800=""; var IE1152=""; var IEother=""; ScreenWidth(IE1024,IE80

  • js获取电脑分辨率的思路及操作

    在做页面时,用户要求,不同的分辨率,弹出窗口的位置不同,我想是不是先获得屏幕宽度,然后付值给变量,再在onclick中设置参数 复制代码 代码如下: <script> alert(screen.width+"*"+screen.height) </script> 复制代码 代码如下: <script> function centerWindow(url,w,h){ l=(screen.width-w)/2 t=(screen.height-h)/2

  • Js控制弹窗实现在任意分辨率下居中显示

    贴代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv

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

    最近看一个网站,发现显示器不同的分辨率,样式文件调用的也不一样,今天写了一个例子研究一下, 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link rel="stylesheet" id="sc" type="text/css"

  • JS点击某个图标或按钮弹出文件选择框的实现代码

    下面一段代码是基于js实现的点击某个图标或按钮弹出文件选择框的核心代码,代码比较简单,需要的朋友参考下 具体代码如下所示: <HTML> <head> <script type="text/javascript" src="script/jquery-1.6.2.min.js"></script> <script type='text/javascript'> function selectFile(){

  • flex中使用css样式修改TextArea滚动条的皮肤代码

    复制代码 代码如下: <mx:script> <![CDATA[ ........ var contentTextArea = new TextArea(); contentTextArea.setStyle("verticalScrollBarStyleName","mytextAreaStyle"); ........ ]]> </mx:Script> <mx:Style> .mytextAreaStyle{ /*

  • vue.js引入外部CSS样式和外部JS文件的方法

    学习Vue.js动画时,需要引入一个animate.css,如何全局引入外部文件呢? 一.引入外部CSS样式文件 1. 在app.vue中<style>下直接引入对应的路径 使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到<style></style>里面,而是发起新的请求获得样式资源,并且没有加scoped. <style scoped> @import "../static/font/

  • 原生js更改css样式的两种方式

    原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  "的方式直接更改CSS样式. 2. 先在CSS样式表中对特定的类如"active类"设置样式(这里的active类是假定的,暂时不存在),然后再在javascript代码中通过node.classname="active"使得CSS样式表中对active类的样式设

  • JS设置CSS样式的方式汇总

    1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100); element.setAttribute

  • 用JS动态设置CSS样式常见方法小结(推荐)

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100);

  • js 判断checkbox是否选中的操作方法

    核心提示: 大家在很多场合也许会遇到判断页面是否有元素选中,下面介绍的是利用js判断是否选中CheckBox的方法. //第几个没有选 复制代码 代码如下: <input type="checkbox" name="checkbox1" checked> <input type="checkbox" name="checkbox1"> <input type="checkbox"

随机推荐