首先，我们要知道如何得到屏幕的相关数据。

<html>
<head>
<title>获取当前对象大小以及屏幕分辨率等</title>
<body>
<div style=" width:88%;margin:30px auto; color:blue;" id="div_html">
</div>
<script type="text/javascript">
var s = "";
s += " 网页可见区域宽："+ document.body.clientWidth+"<br />";
s += " 网页可见区域高："+ document.body.clientHeight+"<br />";
s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"<br />";
s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)"+"<br />";
s += " 网页正文全文宽："+ document.body.scrollWidth+"<br />";
s += " 网页正文全文高："+ document.body.scrollHeight+"<br />";
s += " 网页被卷去的高(ff)："+ document.body.scrollTop+"<br />";
s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop+"<br />";
s += " 网页被卷去的左："+ document.body.scrollLeft+"<br />";
s += " 网页正文部分上："+ window.screenTop+"<br />";
s += " 网页正文部分左："+ window.screenLeft+"<br />";
s += " 屏幕分辨率的高："+ window.screen.height+"<br />";
s += " 屏幕分辨率的宽："+ window.screen.width+"<br />";
s += " 屏幕可用工作区高度："+ window.screen.availHeight+"<br />";
s += " 屏幕可用工作区宽度："+ window.screen.availWidth+"<br />";
s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"+"<br />";
s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"+"<br />";
document.getElementById("div_html").innerHTML = s;
</script>
</body>
</html>

第二步，我们应该要应该js修改css的三种方式。

<body>
<div id="div">这是一个盒子</div>
<script type="text/javascript">
var div = document.getElementById("div");

//第一种:用cssText
div.style.cssText='width:600px;height:250px;border:1px red solid;text-align: center;line-height: 250px;';

//第二种：用setProperty()
div.style.setProperty('width','700px');
div.style.setProperty('height','300px');
div.style.setProperty('line-height','300px');
div.style.setProperty('background','#f00');
div.style.setProperty('color','#fff');
div.style.setProperty('border','1px solid blue');
div.style.setProperty('text-align','center');

//第三种：使用css属性对应的style属性
div.style.width = "800px";
div.style.height = "250px";
div.style.lineHeight = "250px";
div.style.background = "#000";
div.style.color = "#fff";
div.style.border = "1px solid #111";
div.style.textAlign = "center";
</script>
</body>

第三点应该注意，在js改变css的时候，对于得到的变量情况，应该加上“px”

例如：document.getElementById("body_left").style.height = h + "px";

js通过查看屏幕大小，更改其他css属性的更多相关文章

  1. ioctl函数的使用之查看终端屏幕大小

    要想查看一个终端屏幕的大小,可以使用ioctl()函数,步骤如下. 1.首先找到对应终端的文件号,一般在   /dev/pts/....(0,1,2..).具体几号需要自己验证.如在pts目录下使用命 ...

  2. 如何根据屏幕大小改变class的css样式

    /*当屏幕小于1200px*/ @media (max-width:1200px) { ...} 此处针对所有小于1200px屏幕的css属性. /*当屏幕小于1200px且大于992px*/ @me ...

  3. js 根据屏幕大小调用不同的css文件

    原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了. 解决方法:首先,在hea ...

  4. （转)JS获取当前对象大小以及屏幕分辨率等

    原文 JS获取当前对象大小以及屏幕分辨率等   <script type="text/javascript">function getInfo(){       var ...

  5. JS获取当前对象大小以及屏幕分辨率等...

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta nam ...

  6. js获取屏幕大小

    1.js获取屏幕大小 <html> <script> function a(){ document.write( "屏幕分辨率为:"+screen.widt ...

  7. 【Javascript Demo】JS获取当前对象大小以及屏幕分辨率等

    效果如下: 代码如下: <html> <head> <title>获取当前对象大小以及屏幕分辨率等</title> <body> <d ...

  8. CSS 屏幕大小自适应

    要想实现css屏幕大小自适应,首先得引入 CSS3 @media 媒体查询器: media的使用和规则: ①被链接文档将显示在什么设备上. ②用于为不同的媒介类型规定不同的样式. 语法:  @medi ...

  9. html 网页背景图片根据屏幕大小CSS自动缩放

    https://blog.csdn.net/coslay/article/details/47109281 腾讯微博和QQ空间的登录背景图片是根据访客的屏幕大小自动缩放的,但是好像是用JQuery代码 ...

随机推荐

  1. zookeeper分布式服务中选主的应用

    通常zookeeper在分布式服务中作为注册中心,实际上它还可以办到很多事.比如分布式队列.分布式锁 由于公司服务中有很多定时任务,而这些定时任务由于一些历史原因暂时不能改造成框架调用 于是想到用zo ...

  2. web页面空白，无任何显示

    解决前: 解决后: 原因:HTML代码有误,没有关闭script标签. 解决方法:加</script>

  3. 【Python】关于decode和encode

    #-*-coding:utf-8 import sys ''' *首先要搞清楚,字符串在Python内部的表示是unicode编码,因此,在做编码转换时,通常需要以unicode作为中间编码, 即先将 ...

  4. 【POI】java对excel的读写操作

    在工作中需要将mongo中的数据导出到excel中,所以根据需要学习了poi.以下为学习内容的总结: 1.POI是什么? poi是Apache团队开发的专门面对用java处理Excel文档的工具. 官 ...

  5. vim 加密(crypt)文本文档

    算法 vim7.3版本支持两种加密方式——PKzip算法(已知有缺陷的).Blowfish算法(从7.3版本开始支持).Blowfish2算法(从7.4.399版本开始支持)而vim -x 默认采用P ...

  6. 文档资源搜索小工具 - 支持PDF,DOC,PPT,XLS

    最近做了一个文档搜索小工具,当然不是网盘搜索工具,这个工具支持四种文件格式搜索(pdf,doc,ppt,xls),你只需要在搜索框中输入你想要搜索资源的关键词,点击搜索按钮即可获取相关资源,点击下载按 ...

  7. 克拉美罗界（CRB）

    转载自:http://www.cnblogs.com/rubbninja/p/4512765.html 各种研究领域(包括无线定位方向)都会碰到参数估计的问题,这时常常会看到克拉美罗界 (Cramér ...

  8. 初学mysql 那些记不住的命令

    修改密码: https://dev.mysql.com/doc/refman/5.7/en/resetting-permissions.html MySQL 5.7.6 之后: ALTER USER ...

  9. 当进行服务端渲染的时间，某些npm包可能会调用document，window这些对象而导致报错

    1.在didmount里面使用require引入 require.ensure([], (require) => { this.setState({ picker: require('./Pic ...

  10. SpringBoot使用Druid数据库加密链接完整方案

    网上的坑 springboot 使用 Druid 数据库加密链接方案,不建议采用网上的一篇文章<springboot 结合 Druid 加密数据库密码遇到的坑!>介绍的方式来进行加密链接实 ...