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

最新推荐文章于 2024-04-06 13:00:12 发布

ABU_MOlI_ITUI

最新推荐文章于 2024-04-06 13:00:12 发布

阅读量226

点赞数

分类专栏： javaScript 文章标签： javascript

本文链接：https://blog.csdn.net/ABU_MOlI_ITUI/article/details/107928620

版权

javaScript 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

操作内联样式：

<!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>

获取元素的样式：

<!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>