js中style,currentStyle,getComputedStyle和getBoundingClientRect的区别以及获取css操作方法
2018-03-06 15:04
751 查看
js中style,currentStyle,getComputedStyle和getBoundingClientRect的区别以及获取css操作方法在js中,之前我们获取属性大多用的都是ele.style.border这种形式的方法,但是这种方法是有局限性的,该方法只能获取到行内样式,获取不了外部的样式.所以呢下面我就教大家获取外部样式的方法,因为获取外部的样式存在兼容性的问题,所以后面我还会教大家解决兼容性的方法.
style:各大浏览器都兼容,能设置样式和获取样式,但是获取不了外部样式,如果写了行内没有的样式,返回的是空值
写法:ele.style.attr(这样为获取),ele.style.attr="值";
currentStyle:该属性只兼容IE,不兼容火狐和谷歌
写法:ele.currentStyle["attr"]或者ele.currentStyle.attr;
getComputedStyle:该属性是兼容火狐谷歌,不兼容IE
写法:window.getComputedStyle(ele,null)[attr]获取是window.getComputedStyle(ele,null).attr
注意:currentStyle属性和getComputedStyle属性不能设置属性,只能获取
console.log(getStyle(div,"background-color"));
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}getBoundingClientRect():返回一个矩形对象,包含四个属性:left、top、right和bottom。分别表示元素各边与页面上边和左边的距离
var box=document.getElementById('box'); // 获取元素
alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离
alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离
alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离
alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离注意:IE、Firefox3+、Opera9.5、Chrome、Safari支持,在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素,我们需要做个兼容。
style:各大浏览器都兼容,能设置样式和获取样式,但是获取不了外部样式,如果写了行内没有的样式,返回的是空值
写法:ele.style.attr(这样为获取),ele.style.attr="值";
currentStyle:该属性只兼容IE,不兼容火狐和谷歌
写法:ele.currentStyle["attr"]或者ele.currentStyle.attr;
getComputedStyle:该属性是兼容火狐谷歌,不兼容IE
写法:window.getComputedStyle(ele,null)[attr]获取是window.getComputedStyle(ele,null).attr
注意:currentStyle属性和getComputedStyle属性不能设置属性,只能获取
var div=document.getElementsByTagName("div")[0]; if(div.currentStyle){ //IE上兼容 console.log(div.currentStyle["width"]); } else{ //火狐谷歌上兼容 console.log(window.getComputedStyle(div,null)["width"]); }一个兼容性的方法:var div=document.getElementsByTagName("div")[0];
console.log(getStyle(div,"background-color"));
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}getBoundingClientRect():返回一个矩形对象,包含四个属性:left、top、right和bottom。分别表示元素各边与页面上边和左边的距离
var box=document.getElementById('box'); // 获取元素
alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离
alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离
alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离
alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离注意:IE、Firefox3+、Opera9.5、Chrome、Safari支持,在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素,我们需要做个兼容。
document.documentElement.clientTop; // 非IE为0,IE为2 document.documentElement.clientLeft; // 非IE为0,IE为2 //分别加上外边据、内边距、边框和滚动条,用于测试所有浏览器是否一致。 functiongGetRect (element) { var rect = element.getBoundingClientRect(); var top = document.documentElement.clientTop; var left= document.documentElement.clientLeft; return{ top : rect.top - top, bottom : rect.bottom - top, left : rect.left - left, right : rect.right - left } }
相关文章推荐
- js中style,currentStyle和getComputedStyle的区别以及获取css操作方法
- js获取css值的方法:style、getComputedStyle和currentStyle
- js中获取元素属性、currentStyle与getComputedStyle的区别
- JS基础篇--JS中使用document.defaultView.getComputedStyle()、currentStyle()方法获取CSS属性值
- js获取css值的方法:style、getComputedStyle和currentStyle
- js获取css值的方法:style、getComputedStyle和currentStyle
- js用currentStyle和getComputedStyle获取css样式(非行间)
- 如何用js获取元素样式(get.ComputedStyle()和currentStyle方法)
- JS使用getComputedStyle()方法获取CSS属性值
- js获取样式、currentStyle和getComputedStyle的兼容写法
- Js中的style,currentStyle,getComputedStyle()区别
- 获取元素css属性值getComputedStyle与*.style.*的区别
- js中style,currentStyle和getComputedStyle的区别
- css样式获取,style,currentStyle,getComputedStyle
- 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)
- JS中style、currentStyle、getComputedStyle的区别
- js中style,currentStyle和getComputedStyle的区别
- js便签笔记(7)——style、currentStyle、getComputedStyle区别介绍【转载】
- JS中style、currentStyle、getComputedStyle的区别
- JS使用getComputedStyle()方法获取CSS属性值