标签：规则 append script title ted null 包含 idt var
一，获取元素的css大小
1.通过style内联获取元素的大小
var box = document.getElementById(‘box‘); // 获得元素;
box.style.width; // 200px;
box.style.height;
2.通过计算获取元素的大小
var style = window.getComputedStyle ? window.getComputedStyle(box,null) : null || box.currentStyle;
style.width;
3.通过CSSStyleSheet对象中的cssRules(或rules)属性获取元素的大小;
二 获取元素实际大小
1.clientWidth和clientHeight
返回了元素大小,但没有单位,默认单位是px;
PS:对于元素的实际大小,clientWidth和clientHeight理解如下:
1.元素增加边框,无变化,200;
2.元素增加外边框,无变化,200;
3.增加滚动条,最终值=原本大小-滚动条大小;184;
4.增加内边距,最终值=原本大小+内边距大小;220;
PS:如果没有设置任何CSS的width和height,那么非IE会算上滚动条和内边距的计算后的大小;而IE则返回0;
2.scrollWidth和scrollHeight
这组属性可以获取没有滚动条的情况下,元素内容的总高度;
box.scrollWidth;
// PS:返回了元素大小,默认单位是px;如果没有设置任何CSS的width和height,它会得到计算后的宽度和高度;
3.offsetWidth和offsetHeight
这组属性可以返回元素实际大小,包含边框/内边距和滚动条;
box.offsetWidth; 200
PS:返回了元素大小,默认单位是px;如果没有设置任何CSS的width和height,它会得到计算后的宽度和高度;
PS:对于元素的实际大小,理解如下:
1.增加边框,最终值=原本大小+边框大小;220;
2.增加内边距,最终值=原本大小+内边距大小;220;
3.增加外边据,无变化;
4.增加滚动条,无变化,不会减小;
PS:对于元素大小的获取,一般是块级(block)元素并且已设置了CSS大小的元素较为方便;
1 var flag = true; 2 3 if (flag) { 4 var script = document.createElement(‘script‘); 5 script.type = "text/javascript/"; 6 script.text = "alert(‘test‘)"; 7 document.getElementByTagName("head")[0].appendChild(script);
}
标签：规则 append script title ted null 包含 idt var
原文地址：http://www.cnblogs.com/qiangtian/p/5994097.html
