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'; //改变字体的大小

原文地址:https://www.cnblogs.com/wjh0916/p/5760599.html