JS来获取全局样式值—style,currentStyle,getComputedStyle() 并解决浏览器兼容性问题

一. style对象

style读取样式

语法:元素.style.样式名

还可以设置通过style属性设置的样式

语法:元素.style.样式=样式值

注意:   如果Css的样式值含有-,
		这种名称在JS中是不合法的,比如background-color
		我们在使用是要把这样的名称修改为驼峰命名法
		去掉-,然后将-号后的字母大写

注意:通过style属性设置和读取的都是内联样式,无法读取样式表中的样式。

通过一个例子来解释:


<html>
<head>
<meta charset="utf-8">
<title>styletitle>
	<style>
		#box1{
			width:200px;
			height: 200px;
			background-color: red;
		}
	style>
	<script>
	window.onload=function(){
		/*
		点击按钮以后,修box1的大小
		*/
		//获取box1
		var box1=document.getElementById("box1");
		//绑定单击响应函数
		var btn01=document.getElementById("btn01");
		btn01.onclick=function(){
			//修改box1的宽度
			/*
			我们通过style属性设置的样式都是内联样式
			而内联样式有较高的优先级,所以通过js修改的样式往往会立即显示
			
			但是如果在样式中写了!important 则此时样式会有最高的优先级
			即使通过js也不能覆盖该样式,导致js样式修改失效
			*/
			box1.style.width="300px";
			box1.style.height="300px";
			box1.style.backgroundColor= "yellow";
		}
		
		var btn02=document.getElementById("btn02");
		btn02.onclick=function(){
			alert(box1.style.width);
		}	
	}
	script>
head>
<body>
	<button id="btn01">点我一下1button>
	<button id="btn02">点我一下2button>
	<div id="box1">div>
body>
html>

二. currentStyle对象

currentStyle是获取元素当前显示的样式

语法:元素.currentStyle.样式名

注意:只有IE和Opera支持使用CurrentStyle获取的元素计算后的样式

未设置的属性值,currentStyle 会读取浏览器默认值

	alert(box1.currentStyle.width);
	alert(box1.currentStyle.backgroundColor);

三. getComputedStyle()方法

getComputedStyle() 这个方法来获取元素当前的样式
这个方法是window的方法,可以直接使用

需要两个参数
第一个:要获取样式的元素
第二个:可以传递一个伪元素,一般都传null

该方法会返回一个数组对象,对象中封装了当前元素对应的样式
可以通过对象,样式名来读取样式
如果获取的样式没有设置,则会获取到真实的值,而不是默认值
比如:没有设置width,它不会获取到auto 而是一个长度

但是该方法不支持IE9以下的浏览器


<html>
<head>
<meta charset="utf-8">
<title>读取元素的样式title>
	<style>
		#box1{
			width:100px;
			height: 100px;
			background-color: yellow;
		}
	style>
	<script>
	window.onload=function(){
		var box1=document.getElementById("box1");
		var btn01=document.getElementById("btn01");
		btn01.onclick=function(){
			alert(getComputedStyle(box1,null).backgroundColor); //rgb(255, 255, 0)
			//alert(getComputedStyle(box1, null)['backgroundColor']); 该写法与上面作用一样
			alert(getComputedStyle(box1,null).width); //100px
		}
	}
	script>
head>
<body>
	<button id="btn01">点我一下button>
	<div id="box1">div>
body>
html>

小结:以上的三种方法都存在缺陷,style它只能获取到内联样式中的属性值,currentStyle它由于兼容性不好,使用起来有很大的问题。getComputedStyle()方法,也不能完美兼容,只支持IE9+以上的浏览器。

四,解决兼容性问题

自己定义一个函数,通过判断来确定使用哪种方法,可以解决浏览器的兼容性问题。


<html>
<head>
<meta charset="utf-8">
<title>读取元素的样式title>
	<style>
		#box1{
			width:100px;
			height: 100px;
			background-color: yellow;
		}
	style>
	<script>
	window.onload=function(){
		var box1=document.getElementById("box1");
		var btn01=document.getElementById("btn01");
		btn01.onclick=function(){
			var a=getStyle(box1,"width");
			alert(a);
		}
	}
		/*
		obj 要获取样式的元素
		name 要获取的样式名
		*/
		function getStyle(obj,name){
		if(window.getComputedStyle){
			//正常浏览器的方式,具有getComputedStyle()方法
			return getComputedStyle(obj,null)[name];
		}else{
			//IE8的方式,没有getComputedStyle()方法
			return obj.currentstyle[name];
			}
		//与上面的if作用一样	
		//return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentstyle[name];
		}
	script>
head>

<body>
	<button id="btn01">点我一下button>
	<div id="box1">div>
body>
html>

你可能感兴趣的:(JavaScript)