JS获取样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            #box1{
                width: 100px;
                height: 100px;
                background-color: red;
            }
            
        </style>
        
        <script type="text/javascript">
            
            window.onload = function(){
1、设置内联样式
                /*
                 * 点击按钮以后,修改box1的大小
                 */
                //获取box1
                var box1 = document.getElementById("box1");
                //为按钮绑定单击响应函数
                var btn01 = document.getElementById("btn01");
                btn01.onclick = function(){
                    
                    //修改box1的宽度
                    /*
                     * 通过JS修改元素的样式:
                     *     语法:元素.style.样式名 = 样式值    (样式值是字符串)
                     * 
                     * 注意:如果CSS的样式名中含有-,
                     *         这种名称在JS中是不合法的比如background-color,- 是运算符
                     *         需要将这种样式名修改为驼峰命名法,
                     *         去掉-,然后将-后的字母大写
                     * 
                     * 我们通过style属性设置的样式都是内联样式,
                     *     而内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示
                     * 
                     * 但是如果在样式中写了!important,则此时样式会有最高的优先级,
                     *     即使通过JS也不能覆盖该样式,此时将会导致JS修改样式失效
                     *     所以尽量不要为样式添加!important
                     *     box1.style.backgroundColor = "yellow" ! important;
                     */
                    box1.style.width = "300px";
                    box1.style.height = "300px";
                    box1.style.backgroundColor = "yellow";
                    
                };
                
2.获取内联样式
                //点击按钮2以后,读取元素的样式
                var btn02 = document.getElementById("btn02");
                btn02.onclick = function(){
                    //读取box1的样式
                    /*
                     *     语法:元素.style.样式名  (字符串)
                     * 
                     * 通过style属性设置和读取的都是内联样式
                     *     无法读取样式表中的样式
                     */
                    //alert(box1.style.height);
                    alert(box1.style.width);
                };
            };
            
            
        </script>
    </head>
    <body>
        
        <button id="btn01">点我一下</button>
        <button id="btn02">点我一下2</button>
        
        <br /><br />
        
        <div id="box1"></div>
        
    </body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				//点击按钮以后读取box1的样式
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//读取box1的宽度
					//alert(box1.style.width);
3、获取元素当前的样式
					/*
					 * 获取元素的当前显示的样式
					 * 	语法:元素.currentStyle.样式名
					 * 它可以用来读取当前元素正在显示的样式
					 * 	如果当前元素没有设置该样式,则获取它的默认值
					 * 
					 * currentStyle只有IE浏览器支持,其他的浏览器都不支持
					 */
					
					//alert(box1.currentStyle.width);
					//box1.currentStyle.width = "200px";
					//alert(box1.currentStyle.backgroundColor);
					
					/*
					 * 在其他浏览器中可以使用
					 * 		getComputedStyle()这个方法来获取元素当前的样式
					 * 		这个方法是window的方法,可以直接使用
					 * 需要两个参数
					 * 		第一个:要获取样式的元素
					 * 		第二个:可以传递一个伪元素,一般都传null
					 * 
					 * 该方法会返回一个对象,对象中封装了当前元素对应的样式
					 * 	可以通过对象.样式名来读取样式
					 * 	如果获取的样式没有设置,则会获取到当前样式的实际值,而不是默认值
					 * 	比如:没有设置width,它不会获取到auto,而是一个当前长度
					 * 
					 * 但是该方法不支持IE8及以下的浏览器
					 * 
					 * 通过currentStyle和getComputedStyle()读取到的样式都是只读的,
					 * 	不能修改,如果要修改必须通过style属性
					 */
					//var obj = getComputedStyle(box1,null);
					
					/*alert(getComputedStyle(box1,null).width);*/
					//正常浏览器的方式
					//alert(getComputedStyle(box1,null).backgroundColor);
					
					//IE8的方式
					//alert(box1.currentStyle.backgroundColor);
					
					//alert(getStyle(box1,"width"));
					
					var w = getStyle(box1,"width");
					alert(w);
					
					
				};
				
			};
			
			/*
			 * 自定义一个函数,用来获取指定元素的当前的样式,解决IE8 和其他浏览器的兼容问题
			 * 参数:
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式名
			 */
			
			function getStyle(obj , name){
				
				if(window.getComputedStyle){  //getComputedStyle变量在IE 8 中未定义,会报错,程序无法执行,
				    //window.getComputedStyle  这是为window对象动态增加一个getComputedStyle属性,在IE 8 中getComputedStyle属性未找到,会返回undefined,是false
					// 把变量转换成属性来判断  注意 getComputedStyle() 和 getComputedStyle的区别  一个是方法  一个是变量   名字一样

					//正常浏览器的方式,具有getComputedStyle()方法  getComputedStyle(obj , null).name写死了,name是变量,接收字符串,可以用类似数据的方式访问对象的属性
					return getComputedStyle(obj , null)[name];  //getComputedStyle(box1,null).backgroundColor  变量的访问方式
				}else{
					//IE8的方式,没有getComputedStyle()方法
					return obj.currentStyle[name];
				}
				//简写
				//return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];
				
			}
			
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button>
		<br /><br />
		<div id="box1" ></div>
	</body>
</html>

 

上一篇:js_getComputed方法和style属性关于读取样式的区别


下一篇:js常见错误类型