前端---js（自学笔记22)（操作内联样式、获取元素的样式）

比眉伴天荒 2022-11-26 07:50 190阅读 0赞

## 操作内联样式： ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>设置内联元素样式</title>
    		<style type="text/css">
    			#box1{
    				width: 100px;
    				height:100px;
    				background-color: blue;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload = function(){
    //				获取box和按钮元素
    			var box1 =document.getElementById("box1");
    			var btn01 =document.getElementById("btn01");
    			btn01.onclick=function(){
    				//alert("hello");
    				//通过js的style修改样式
    				//语法：元素.style.样式名=样式值
    				box1.style.width ="200px";
    				box1.style.height ="200px";
    				//此时css样式中含有-的，都要采用驼峰命名法
    				box1.style.backgroundColor="yellow"
    				//我们通过style设置的样式都是内联样式，而内联样式有较高的优先级，所以通过js修改会立即生效
    				//如果样式中写了！important，此时样式中有最高的优先级，即使通过js也不能覆盖该样式，
    				//此时会导致样式失效，所以尽量不要添加！important
    			};
    			var btn02 =document.getElementById("btn02");
    			btn02.onclick= function(){
    				//通过style属性设置和读取的都是内联样式，但是 无法读取样式表中的样式
    				//读取语法：元素.style.样式名
    				alert(box1.style.width)
    			}
    			};
    		</script>
    	</head>
    	<body>
    		<button id="btn01">点击</button>
    		<button id="btn02">获取详细信息</button>
    		<br />
    		<br />
    		<div id="box1"></div>
    	</body>
    </html>

![2020081109550427.gif][]

## 获取元素的样式： ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>获取元素内联样式</title>
    		<style type="text/css">
    			#box{
    				width: 100px;
    				height: 100px;
    				background-color: yellow;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload=function(){
    				//点击之后获取box的样式
    				var box =document.getElementById('box');
    				var btn01=document.getElementById('btn01')
    				btn01.onclick=function () {
    					//读取box的宽度
    					//alert(box.style.width)
    					/*
    					 *获取元素的当前显示的样式
    					 * 语法：元素.currentStyle.样式名
    					 * 它可以用来读取当前元素正在显示的样式
    					 * 如果当前元素没有设置该样式，则获取它的默认值
    					 * 
    					 * currentStyle只有IE浏览器支持，其他的浏览器都不支持
    					 * */
    					//alert(box.currentStyle.width);
    				  /**
    				   * 在其他浏览器中可以使用
    				   * getComputedStyle()这个方法来获取元素当前样式
    				   * 这个方法是window的方法，可以直接使用
    				   * 
    				   * 需要俩个参数：
    				   * 第一个，要获取样式的元素
    				   * 第二个，可以传递一个伪元素，一般都传null
    				   * 
    				   * 该方法会返回一个对象，对象中封装了当前元素对应的样式
    				   * 可以通过对象，样式名来读取样式
    				   * 如果获取的样式没有设置，则会获取到真实的值，而不是默认的
    				   * 比如：你没有设置width，它不会获取auto，而是一个长度
    				   * 
    				   * 但是该方法不支持IE8以下的浏览器
    				   * 
    				   * 通过currentStyle和getComputedStyle()读取到的样式都只是读，不可修改
    				   * **/
    				 // var obj =getComputedStyle(box,null)
    				 //alert(getComputedStyle(box,null).width)
    				 //正常浏览器的方式
    				 //alert(getComputedStyle(box,null).backgroundColor);
    				 //IE8的方式
    				 //alert(box.currentStyle.backgroundColor);
    				 
    				 //alert(getStyle(box,"width"))
    				 var w =getStyle(box,"width");
    				 alert(w);
    				}
    				
    			}
    			/**
    			 * 定义一个函数，用来获取指定元素的当前的样式
    			 * 参数：
    			 * obj 要获取样式的元素
    			 * name 要获取的样式名
    			 * **/
    			function getStyle(obj,name){
    				/**
    				 * 变量和属性的区别：
    				 * 如果变量没找到，就会报错，
    				 * 比如：if(getComputedStyle)-----getComputedStyle为变量
    				 * 但是如果属性没找都，返回undefined
    				 * if(window.getComputedStyle)
    				 * **/
    //				if(window.getComputedStyle){
    //					return getComputedStyle(obj,null)[name];
    //				}else{
    //					return obj.currentStyle[name]
    //				}
    				
    				return window.getComputedStyle? getComputedStyle(obj,null)[name]:obj.currentStyle[name]
    //				正常浏览器
    				//return getComputedStyle(obj,null)[name];
    				
    //				Ie8
    				//return obj.currentStyle[name]
    			}
    		</script>
    	</head>
    	<body>
    		<button id="btn01">点击</button>
    		<br />
    		<br />
    		<div id="box" style="width: 100px;"></div>
    	</body>
    </html>

[2020081109550427.gif]: /images/20221124/38b5d63d15704d4b99474e4c0ec18b55.png