js修改页面元素的高宽

JavaScript014

js修改页面元素的高宽,第1张

这个肯定是一起变化的。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

  #aa{width:400px}

  #bb{width:100%}

  </style>

</head>

<body>

<div id="aa">

  <div id="bb">#aa的宽为<span id="aaw">400</span><br>#bb的宽为<span id="bbw">0</span></div>

</div>

</body>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>

<script>

$(function() {

  function eleW() {

    $("#aaw").text($("#aa").width()+"px")

    $("#bbw").text($("#bb").width()+"px")

  }

  eleW()

  $("#aa").width("800")

  setTimeout(function() {eleW()},1000)

})

</script>

</html>

你好!!

你这是要修改样式的意思吧,是想通过javascript来控制样式么?

可以直接为元素设置style来达到你想要的效果。

//首先<div class="list_top">增加一个id标识,改为<div id="listTop" class="list_top">

<script>

        //在这里配置你的内容,对照你自己要的数值就好了

        var config={

         "_width":"960px",

         "_height":"60px",

         "_background":"#faa",

         "_li_width":"",

         "_li_height":"",

         "_a_color":"yellow"

        }

        //初始化函数,将配置的数值,分别设置到元素中

        function init(config){

         var lstTop = document.getElementById("listTop")

         lstTop.style.width = config["_width"]?config["_width"]:lstTop.style.width

         lstTop.style.height= config["_height"]?config["_height"]:lstTop.style.height

         lstTop.style.background= config["_background"]?config["_background"]:lstTop.style.background

        

         var hot = document.getElementById("hottitle")

         hot.style.width = config["_width"]?config["_width"]:hot.style.width

         hot.style.height= config["_height"]?config["_height"]:hot.style.height

        

         var ul = document.getElementById("ulid")

         ul.style.width = config["_width"]?config["_width"]:ul.style.width

         ul.style.height= config["_height"]?config["_height"]:ul.style.height

        

         var lis = ul.getElementsByTagName("li")

         for(var i=0i<lis.lengthi++){

         lis[i].style.width = config["_li_width"]?config["_li_width"]:lis[i].style.width

         lis[i].style.height= config["_li_width"]?config["_li_width"]:lis[i].style.height

         var a = lis[i].getElementsByTagName("a")

         a[0].style.color = config["_a_color"]?config["_a_color"]:a[0].style.color

         }

        }

        window.onload = function(){

         init(config)

        }

</script>

编写相应程序代码即可。

代码如下:

<script>

function getInfo()

{

var s = ""

s += " 网页可见区域宽:"+ document.body.clientWidth

s += " 网页可见区域高:"+ document.body.clientHeight

s += " 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)"

s += " 网页可见区域高:"+ document.body.offsetHeight + " (包括边线的宽)"

s += " 网页正文全文宽:"+ document.body.scrollWidth

s += " 网页正文全文高:"+ document.body.scrollHeight

s += " 网页被卷去的高(ff):"+ document.body.scrollTop

s += " 网页被卷去的高(ie):"+ document.documentElement.scrollTop

s += " 网页被卷去的左:"+ document.body.scrollLeft

s += " 网页正文部分上:"+ window.screenTop

s += " 网页正文部分左:"+ window.screenLeft

s += " 屏幕分辨率的高:"+ window.screen.height s += " 屏幕分辨率的宽:"+ window.screen.width

s += " 屏幕可用工作区高度:"+ window.screen.availHeight

s += " 屏幕可用工作区宽度:"+ window.screen.availWidth

s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"

s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"

//alert (s)

}

getInfo()

</script>