其他分享
首页 > 其他分享> > Dom 操作css

Dom 操作css

作者:互联网

1. 读取


			 * 	语法:元素.style.样式名
			 * 
			 * 通过style属性设置和读取的都是内联样式
			 * 	无法读取样式表中的样式
			 

2. 修改


			 * 通过JS修改元素的样式:
			 * 	语法:元素.style.样式名 = 样式值
			 * 
			 * 注意:如果CSS的样式名中含有-,
			 * 		这种名称在JS中是不合法的比如background-color
			 * 		需要将这种样式名修改为驼峰命名法,
			 * 		去掉-,然后将-后的字母大写
			 * 
			 * 我们通过style属性设置的样式都是内联样式,
			 * 	而内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示
			 * 
			 * 但是如果在样式中写了!important,则此时样式会有最高的优先级,
			 * 	即使通过JS也不能覆盖该样式,此时将会导致JS修改样式失效
			 * 	所以尽量不要为样式添加!important
			 

3. 当前显示样式


			 * 获取元素的当前显示的样式
			 * 	语法:元素.currentStyle.样式名
			 * 它可以用来读取当前元素正在显示的样式
			 * 	如果当前元素没有设置该样式,则获取它的默认值
			 * 
			 * currentStyle只有IE浏览器支持,其他的浏览器都不支持
			 

			 * 在其他浏览器中可以使用
			 * 		getComputedStyle()这个方法来获取元素当前的样式
			 * 		这个方法是window的方法,可以直接使用
			 * 需要两个参数
			 * 		第一个:要获取样式的元素
			 * 		第二个:可以传递一个伪元素,一般都传null
			 * 
			 * 该方法会返回一个对象,对象中封装了当前元素对应的样式
			 * 	可以通过对象.样式名来读取样式
			 * 	如果获取的样式没有设置,则会获取到真实的值,而不是默认值
			 * 	比如:没有设置width,它不会获取到auto,而是一个长度
			 * 
			 * 但是该方法不支持IE8及以下的浏览器
			 * 
			 * 通过currentStyle和getComputedStyle()读取到的样式都是只读的,
			 * 	不能修改,如果要修改必须通过style属性
			 

通过currentStyle和getComputedStyle()读取到的样式都是只读的,
不能修改,如果要修改必须通过style属性

currentStyle只有IE浏览器支持,其他的浏览器都不支持,其他浏览器中可以使用
getComputedStyle()这个方法来获取元素当前的样式
这个方法是window的方法,可以直接使用

4.定义函数用来获取当前样式

正常浏览器的方式,具有getComputedStyle()方法
IE8的方式,没有getComputedStyle()方法


			 * 定义一个函数,用来获取指定元素的当前的样式
			 * 参数:
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式名
			 *
			 
			function myStyle(obj,name){
				//正常浏览器的方式,具有getComputedStyle()方法
				if(window.getComputedStyle){
					return obj.getComputedStyle;
				}else{
					//IE8的方式,没有getComputedStyle()方法
					return obj.currentStyle[name];
				}
			};

5.clientHeight


			 * clientWidth
			 * clientHeight
			 * 	- 这两个属性可以获取元素的可见宽度和高度
			 * 	- 这些属性都是不带px的,返回都是一个数字,可以直接进行计算
			 * 	- 会获取元素宽度和高度,包括内容区和内边距
			 *  - 这些属性都是只读的,不能修改
			 *

6.offsetWidth


			 * offsetWidth
			 * offsetHeight
			 * 	- 获取元素的整个的宽度和高度,包括内容区、内边距和边框
			 */
			
			

7.offsetParent


			 * offsetParent
			 * 	- 可以用来获取当前元素的定位父元素
			 *  - 会获取到离当前元素最近的开启了定位的祖先元素
			 * 		如果所有的祖先元素都没有开启定位,则返回body
			 

8.scrollLeft

*
			 * scrollLeft
			 * 	- 可以获取水平滚动条滚动的距离
			 * scrollTop
			 * 	- 可以获取垂直滚动条滚动的距离
			

9.scrollHeight - scrollTop == clientHeight

scrollHeight - scrollTop == clientHeight判断垂直滚动条滚动到底

当满足scrollHeight - scrollTop == clientHeight
			说明垂直滚动条滚动到底了

10.全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#colo{
				width:200px;
				height: 200px;
				background-color: #8A2BE2;
			}
		</style>
	</head>
	<body>
		<button id="btn01">点我一下</button>
		<button id="btn02">点我一下2</button>
		
		<br /><br />
		<div id="colo">
			
		</div>
		<script type="text/javascript">
			var btn1 = document.getElementById("btn01");
			var btn2 = document.getElementById("btn02");
			var box = document.getElementById("colo");
			/*
			 * 	语法:元素.style.样式名
			 * 
			 * 通过style属性设置和读取的都是内联样式
			 * 	无法读取样式表中的样式
			 */
			btn1.onclick = function(){
				var box= document.getElementById("colo");
				box.style.width = "250px";
				box.style.height = "250px";
			};
			box.onmousemove = function(){
				var box= document.getElementById("colo");
				box.style.width = "250px";
				box.style.height = "250px";
			};
			//修改box1的宽度
			/*
			 * 通过JS修改元素的样式:
			 * 	语法:元素.style.样式名 = 样式值
			 * 
			 * 注意:如果CSS的样式名中含有-,
			 * 		这种名称在JS中是不合法的比如background-color
			 * 		需要将这种样式名修改为驼峰命名法,
			 * 		去掉-,然后将-后的字母大写
			 * 
			 * 我们通过style属性设置的样式都是内联样式,
			 * 	而内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示
			 * 
			 * 但是如果在样式中写了!important,则此时样式会有最高的优先级,
			 * 	即使通过JS也不能覆盖该样式,此时将会导致JS修改样式失效
			 * 	所以尽量不要为样式添加!important
			 */
			
			/*
			 * 获取元素的当前显示的样式
			 * 	语法:元素.currentStyle.样式名
			 * 它可以用来读取当前元素正在显示的样式
			 * 	如果当前元素没有设置该样式,则获取它的默认值
			 * 
			 * currentStyle只有IE浏览器支持,其他的浏览器都不支持
			 */
			/*
			 * 在其他浏览器中可以使用
			 * 		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"));
			
			/*
			 * 定义一个函数,用来获取指定元素的当前的样式
			 * 参数:
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式名
			 */
			function myStyle(obj,name){
				//正常浏览器的方式,具有getComputedStyle()方法
				if(window.getComputedStyle){
					return obj.getComputedStyle;
				}else{
					//IE8的方式,没有getComputedStyle()方法
					return obj.currentStyle[name];
				}
			};
		</script>
	</body>
</html>

标签:style,浏览器,Dom,样式,元素,getComputedStyle,获取,操作,css
来源: https://blog.csdn.net/weixin_44154094/article/details/112911968