DOM元素尺寸和位置
1 通过内联获取元素的大小
<body>
<div id="box" style="width: 100px;height: 100px"></div>
</body>
<script type="text/javascript">
var box=document.getElementById('box');
console.log(box.style.height); //100px
console.log(box.style.width); //100px
</script>
</html>
float的兼容性:
<body>
<div id="box">
1234
</div>
<script type="text/javascript">
var box = document.getElementById('box');
typeof box.style.cssFloat!='undefined'?box.style.cssFloat = 'right':box.style.styleFloat = 'right';
</script>
</body>
复合属性用驼峰命名法:style.fontSize;style.zIndex;
添加class,移除class:
// 判断是否有要添加的class名
function hasClass(element,className){
return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));
}
// 添加class
function addClass(element,className){
if(!hasClass(element,className)){
return element.className += ' '+className;
}
}
// 移除class
function removeClass(element,className){
if(hasClass(element,className)){
element.className = element.className.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),'');
}
}
addClass(box,'a');
removeClass(box,'a');
2 获取计算后的元素大小(无论内联,行内,链接)只能获取不能设置
var style=window.getComputedStyle?window.getComputedStyle(box,null):null||box.currentStyle;
第二个是伪类例如:hover;没有则写成null
3 link或style标签内的元素大小
document.getElementsByTagName('style')[0]; //第一个style标签 HTMLStyleElement
document.getElementsByTagName('link')[0]; //第一个link标签 HTMLStyleElement
var link = document.getElementsByTagName('style')[0]||document.getElementsByTagName('link')[0];
var sheet = link.sheet||link.styleSheet; //得到通用的CSSStyleSheet
W3C: IE8-:
样式表集合:sheet.cssRules; 样式表集合:sheet.rules;
删除第一个样式:sheet.deleteRule(0); 删除第一个样式:sheet.removeRule(0);
在第一个位置添加一个样式:sheet.insertRule('body{color:red}',0) 在第一个位置添加一个样式:sheet.addRule('body','color:red',0)
跨浏览器添加和删除css规则:
// 跨浏览器添加css规则
function insertRule(sheet,selectorText,cssText,position){
// 如果是非IE
if(sheet.insertRule){
sheet.insertRule(selectorText+"{"+cssText+"}",position);
// 如果是IE
}else if(sheet.addRule){
sheet.addRule(selectorText,cssText,position);
}
}
// 跨浏览器删除css规则
function deleteRule(sheet,index){
// 如果是非IE
if(sheet.deleteRule){
sheet.deleteRule(index);
// 如果是IE
}else if(sheet.removeRule){
sheet.removeRule(index);
}
}
var sheet = document.styleSheets[0]; //IE 非IE通用
insertRule(sheet,'body','color:red',0); //添加一条css规则
deleteRule(sheet,0); //删除一条css规则
总结:以上三种无法获取元素本身实际大小,比如加了内边距,滚动条,边框。且有单位px。
二 获取元素实际大小(没有单位)
1 clientWidth和clientHeight
可以获取元素可视区的大小:得到元素内容及内边距所占据的空间大小(不算边框),有滚动条要减去。
2 scrollWidth和scrollHeight
可以获取滚动内容的元素大小
3 offsetWidth和offsetHeight
获取元素实际大小;包括边框,内边距,滚动条
4 获取浏览器可视区大小
window.innerWidth和document.documentElement.clientWidth:狐火和其他浏览器
5 可以获取事件对象离浏览器的距离
window.οnclick=function(e){
alert(e.clientX)
}
6:获取浏览器分辨率宽高:
window.screen.width,window.screen.height
三 获取元素周边大小
1 clientLeft和clientTop
可以获取元素的左边框和上边框,无右和下
2 offsetLeft和offsetTop
可以获取元素相当于父元素的位置
定位设置为absolute,父元素设置reletive
如果不设置则是到浏览器可视区上方的距离,margin会累加,padding不影响
3 scrollTop和scrollLeft
可以获取滚动的距离
document.documentElement.scrollTop||document.body.scrollTop