zoukankan      html  css  js  c++  java
  • js通过查看屏幕大小,更改其他css属性

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

    <html>
    <head>
    <title>获取当前对象大小以及屏幕分辨率等</title>
    <body>
    <div style=" 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='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";

  • 相关阅读:
    预备作业02 : 体会做中学(Learning By Doing)
    7-1 货币转换
    秋季学校总结
    人生路上对我影响最大的三个老师
    自我介绍
    2019寒假作业3(抓老鼠啊~亏了还是赚了?)编程总结
    人生路上对我影响最大的三位老师
    自我介绍
    秋季学期学习总结
    7-1 抓老鼠啊~亏了还是赚了?
  • 原文地址:https://www.cnblogs.com/feizhoudiyibai/p/10778838.html
Copyright © 2011-2022 走看看