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