使用getComputedStyle获取样式

陌上花

分类: JavaScript 2503 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];
}
  • 1人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
currentStyle、getComputedStyle()、JavaScript

作者简介: 陌上花

CSS|JavaScript|Python|诗词|文学|生活 所知甚少,唯善学

共 0 条评论关于 “使用getComputedStyle获取样式”

Loading...