使用getComputedStyle获取样式
分类： JavaScript 2461 0
obj.style这种方式既可以读取样式属性，也可以写样式属性，但它操作的样式属性只能是行内样式，如果要访问内嵌或者链式样式，则不可以使用这种写法。
要访问内嵌或者链式样式，可以使用getComputedStyle()和currentStyle属性的方式来访问样式。
需要注意的是：getComputedStyle()和currentStyle属性只能读样式属性，不能写样式属性。
getComputedStyle()
getComputedStyle()可访问指定元素的指定css属性的结果样式,访问格式如下：
// 1
getComputedStyle(需访问样式属性的元素).样式属性
//2
getComputedStyle(ele)[attr]
getComputedStyle(需访问样式属性的元素)[样式属性]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取结果样式</title>
<style>
div {
width: 400px;
height: 300px;
background: #E15671;
}
</style>
</head>
<body>
<div></div>
<script>
// 获取元素封装方法
function $(str){
return document.querySelector(str);
}
//这样写相当于获取标签的一个属性，但标签里又没有，就会出现undefined
//let w = $('div').width;
//console.log(w); // undefined
//获取的是行间样式，如果没有行间样式，获取出来的就为空
let w = $('div').style.width;
console.log(w); //
// 获取的是结果样式,就是获取最终显示效果的样式，外链，内嵌，行间会有优先级
// let w2 = window.getComputedStyle($('div')).width;
// let w2 = window.getComputedStyle($('div'))['width'];
// window下的方法都可以不用写window
// getComputedStyle(ele)[attr]
let w2 = getComputedStyle($('div'))['width'];
console.log(w2);
// 对于复合样式，如果是要获取某一样式，最好是单一属性来访问，比如背景颜色backgroundColor
// let b2 = getComputedStyle($('div'))['background'];
// console.log(b2); //rgb(225, 86, 113) none repeat scroll 0% 0% / auto padding-box border-box
let b2 = getComputedStyle($('div'))['backgroundColor'];
console.log(b2); // rgb(225, 86, 113)
</script>
</body>
</html>
currentStyle
该属性只对IE游览器有效，对Chrome等游览器不可以，其主要是用于兼容IE6 7 8 的。
// 1
需访问样式属性的元素.currentStyle.样式属性
// 2
需访问样式属性的元素.currentStyle(样式属性)
要使用getComputedStyle()和currentStyle属性访问样式一般需要进行游览器兼容处理
// IE8以下支持的方法
var oDiv = document.querySelector('div');
// el.currentStyle(attr)
// 用if去判断el.currentStyle是否存在
if(oDiv.currentStyle){
// IE8
oDiv.currentStyle('width');
}else{
// Chrome
getComputedStyle(oDiv)['width'];
}
封装兼容getComputedStyle()和currentStyle
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取结果样式</title>
<style>
div {
width: 400px;
height: 300px;
background: #E15671;
}
</style>
</head>
<body>
<div></div>
<script>
// // IE8以下支持的方法
var oDiv = document.querySelector('div');
// // el.currentStyle(attr)
// // 用if去判断el.currentStyle是否存在
// if(oDiv.currentStyle){
// // IE8
// oDiv.currentStyle('width');
// }else{
// // Chrome
// getComputedStyle(oDiv)['width'];
// }
// 封装 兼容getStyle
// 由上面的if可以知道，获取样式需要填两个数据
// el 元素
// attr 样式名称
// 然后复制写好的判断，替换下元素与属性
// 需要注意的是，我们的目的是通过getStyle来获取结果样式
// 所以我们还要加上return，使用return把结果返回给函数调用者
function getStyle(el,attr){
if(el.currentStyle){
return el.currentStyle(attr);
}else{
return getComputedStyle(el)[attr];
}
}
// 调用
let w3 = getStyle(oDiv,'width');
let h3 = getStyle(oDiv,'height');
console.log(w3); // 400px
console.log(h3); // 300px
</script>
</body>
</html>
三目运算符（三元运算符）
类似于if…else…
条件?a:b;
// if
let a =true
// if(a){
// console.log(1); // 1
// }else{
// console.log(2);
// }
// 条件直接写?条件允许时执行问号后面的代码:条件不允许时执行冒号后面的代码;
// a?console.log(1):console.log(2); // 1
//
// console.log( a?1:2 )
// 简化之前
// function getStyle(el,attr){
// if(el.currentStyle){
// return el.currentStyle(attr);
// }else{
// return getComputedStyle(el)[attr];
// }
// }
// 简化之后
// 三目 - 条件内js语句不超过1句
function getStyle(el,attr){
return el.currentStyle?el.currentStyle(attr):getComputedStyle(el)[attr];
}
共 0 条评论关于 “使用getComputedStyle获取样式”