j获取html元素的宽高；设置html元素的宽高

使用jQuery编写效果就像叫外卖；使用js实现就行自己在家里开火。此处有表情，哭脸。。。。。。。。。。。。

js获取html元素宽高有两种方法：

obj.style.width;

obj.offsetWidth;

用alert()方法弹出时第一种是获取不到写在样式表里的值也就是（#div{width：200px}）,只能获取到写在行内的宽高；使用js为html元素设置宽时使用obj.style.width。例如，obj.style.width = 500+'px';

 

第二种方法是可以获取html元素宽高的值，无论写在那里。

使用obj.offsetWidth;获取到的是容器当前大小，包括边（border）和内填充（padding）的值。

js本身而言不是写在行内style中的属性都不能通过id.style.atrr来获取。但是为了保证样式、行为、布局分离，严格不要把样式写在行内。所以获取不是行内的style的属性就需要自己编写相应的方法。

使用getStyle()来处理获取样式表里的属性值。

function getStyle(obj,attr){

   if(obj.currentStyle){ //ie浏览器

     return obj.currentStyle[attr];

 }else{

return getComputedStyle(obj,false)[attr]; //火狐浏览器 }

};

直接调用这个函数就可以了。

例如，改变一个id="div"的div宽度大小；

var odiv = document.getElementById('div');

odiv .style.width = parseInt(getStyle(odiv,'width'))-1+'px';//改变宽度

odiv .style.width = parseInt(getStyle(odiv,'fontSize'))+1+'px'; //改变字体的大小