js设置元素宽度

JavaScript022

js设置元素宽度,第1张

变量没什么问题的,你看看,这个s有没有值,是不是加载js时,还没到body那儿,也就计算不出客户端的宽度。以下是具体实现代码:

具体公式是:

var  s = document.body.clientWidth

document.getElementById("body1").innerHTML=s

document.getElementById("body1").style.width="200px"

这个问题我自然想到过,所有时时都把S 是值显示出来了,S是有效的数字型的变量。

可以这一写,width是style的一个数据,js调用数据的方式就有

1、使用小数点的方式

2、使用中括号的方式

但是你的代码调用时 200要带单位

<div style="height:200pxwidth:200px" id="div1"></div>

可以看到平时写法width的数字后面是有单位的

所有在使用函数的时候也需要带上哦

document.getElementById("div1").style['width']="100px"

document.getElementById("div1").style.width="100px"

两种方式都可以

你好!!

你这是要修改样式的意思吧,是想通过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>