web前端javascript笔记——（12）样式

最新推荐文章于 2024-05-22 14:57:01 发布

Komorebi_9999

最新推荐文章于 2024-05-22 14:57:01 发布

阅读量409

点赞数 8

文章标签：前端 javascript 笔记

本文链接：https://blog.csdn.net/JLY19970726/article/details/135637038

版权

本文详细介绍了如何通过JavaScript操作HTML元素的内联样式，包括修改样式、读取样式以及处理不同浏览器的兼容性问题，同时涵盖了clientWidth、offsetWidth、offsetParent等与元素尺寸相关的属性。

摘要由CSDN通过智能技术生成

一、通过style操作内联样式

<!DOCTYPE html>

<head>
	<meta charset="UTF-8">
	<title>

	</title>
	<style>
		#box1 {
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
	<script type="text/javascript">
		/* 通过style属性读取和设置的都是内联样式
		        通过JS修改元素的样式
    			语法：元素.style.样式名=样式值
		 * 通过JS读取元素的样式
		 *      语法：元素.style.样式名
				 */
		window.onload = function() {
			/*点击按钮以后，修改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.width = "100px"; //需要加双引号，否则不对
				box1.style.height = "100px";
				box1.style.backgroundColor = "yellow";
			};
			//点击按钮2以后，读取元素的样式
			var btn02=document.getElementById("btn02");
			btn02.onclick=function(){
				/*语法：
				 元素.style.样式名
				 通过style属性读取和设置的都是内联样式*/
				alert(box1.style.width);
			};
		};
	</script>

</head>

<body>
	<button id="btn01">点我一下</button>
	<br />
	<div id="box1"> </div>
	<button id="btn02">点我一下</button>
</body>

</html>

二、获取元素的样式

<!DOCTYPE html>

<head>
	<meta charset="UTF-8">
	<title>

	</title>
	<style>
		#box1 {
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
	<script type="text/javascript">
		/* 通过style属性读取和设置的都是内联样式
				        通过JS修改元素的样式
		    			语法：元素.style.样式名=样式值
				 * 通过JS读取元素的样式
				 *      语法：元素.style.样式名
						 */
		window.onload = function() {
			/*点击按钮以后，修改box1的大小*/
			//获取box1
			var box1 = document.getElementById("box1");
			//为按钮绑定单击响应函数
			var btn01 = document.getElementById("btn01");
			btn01.onclick = function() {
				/*获取元素的当前显示的样式
                                         语法: 元素.currentStyle.样式名  ,只有IE浏览器支持，其他浏览器都不支持
                                         它可以用来读取当前元素正在显示的样式
                                         不管这个样式是写在哪里的
                */

			/*	getComputedStyle() 这个方法来获取当前元素的样式
				这个方法是window的方法， 可以直接使用
				需要两个参数
				第一个， 要获取样式的元素
				第二个， 可以传递一个伪元素， 一般都传null
				该方法会返回一个对象，对象中封装了当前元素对应的样式
				可以通过对象.样式名来读取样式
				如果获取的样式没有设置，则会获取到真实的值，而不是默认值
				比如，没有设置width,它不会获取到auto,而是一个长度
				
				该方法不支持IE8及以下的浏览器
				
				
				通过currentStyle和getComputedStyle()读取到的样式都是只读的
				不能修改，如果修改必须要通过style属性
					*
					**/
					//正常浏览器的方式
				var obj = getComputedStyle(box1, null);
			//	alert(obj.width);//200px
				//也可以写完
			//	alert(getComputedStyle(box1, null).backgroundColor); //rgb(255,0,0)
				/*IE8的方式
				 alert(box1.currentStyle.backgroundColor);*/
				alert(getStyle(box1,"width"));
				//处理兼容性的方法
				function getStyle(obj,name){
					return getComputedStyle(obj,null)[name]||obj.currentStyle[name];
				}
			};

		};
	</script>

</head>

<body>
	<button id="btn01">点我一下</button>
	<br />
	<div id="box1" style="width:200px;background-color:red;"> </div>

</body>

</html>

三、用getStyle()方法处理浏览器的兼容问题

<!DOCTYPE html>

<head>
	<meta charset="UTF-8">
	<title>

	</title>
	<style>
		#box1 {
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
	<script type="text/javascript">
	
		window.onload = function() {
		
				alert(getStyle(box1,"width"));
				//处理兼容性的方法
				
				/*定义一个函数，用来获取指定元素的当前样式
				 参数:
				 obj 要获取样式的元素
				 name 要获取的样式名*/
				function getStyle(obj,name){
				/*变量和属性的区别就是：
				 变量没找到会报错
				 属性没找到的话返回undefined
				 在变量前面加window. ,变量就变成了window的属性*/
				//写法一:（推荐）
				if(window.getComputedStyle){
					//正常浏览器，具有getComputedStyle（）方法
					return getComputedStyle(obj,null)[name];
				}else{
					//IE8的方式，没有getComputedStyle（)方法
					return obj.currentStyle[name];
				}
				
				//写法二：（存在的缺点就是，如果两个方法都有，就会优先使用第一个。
				/*if(obj.currentStyle){
					//正常浏览器，具有getComputedStyle（）方法
					return obj.currentStyle[name];
				}else{
					//IE8的方式，没有getComputedStyle（)方法
					return getComputedStyle(obj,null)[name];
				}*/
				//写法三：和写法一本质一样
				return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
			};

		};
	</script>

</head>

<body>
	<button id="btn01">点我一下</button>
	<br />
	<div id="box1" style="width:200px;background-color:red;"> </div>

</body>

</html>

四、其他样式的相关属性

<!DOCTYPE html>

<head>
	<meta charset="UTF-8">
	<title>

	</title>
	<style>
		#box1 {
			width: 200px;
			height: 200px;
			background-color: red;
			padding:10px;
			border:10px solid yellow;
			margin:10px;
		}
		#box2{
			padding:100px;
			background-color:#bfa;
		}
		#box4{
			width:200px;
			height:300px;
			background-color:#bfa;
			overflow: auto;
		}
		#box5{
			width:500px;
			height:600px;
			background-color:yellow;
		}
	</style>
	<script type="text/javascript">
	
		window.onload = function() {
			var box1=document.getElementById("box1");
			var btn01=document.getElementById("btn01");
			var box4=document.getElementById("box4");
			btn01.onclick=function(){
				/*clientWidth
				 clientHeight
				 这两个属性可以获取元素的可见宽度和高度
				 这些属性都是不带px的，返回的都是一个数字，可以直接进行计算
				会获取元素的宽度和高度，包括内容区和内边距 
				这些属性都是只读的，不能修改
				修改只能通过style
				 * 
				 * */
			//	alert(box1.clientWidth);  //220
				/*offsetWidth
				  offsetHeight
				 获取元素的整个的宽度和高度，包括内容区、内边距和边框*/
			//	alert(box1.offsetWidth);  //239
				/*offsetParent
				 可以用来获取当前元素的定位父元素
				 会获取到离当前元素最近的开启了定位的祖先元素*/
				var op=box1.offsetParent;
			//	alert(op.id);  //box3
				
				/*offsetLeft
				 * -当前元素相当于其定位元素的水平偏移量
				 offsetTop
				   -当前元素相当于其定位元素的垂直偏移量
				   相对于其定位的父元素，如果没有定位的父元素，就是相对于body
				   */
				//  alert(box1.offsetLeft);  //10   margin-left:10
				/*scrollWidth
				 scrollHeight
				 可以获取元素整个滚动区域的高度、宽度*/
			//	  alert(box4.clientHeight);  //300
			  //    alert(box4.scrollHeight);  //600  子元素（可滚动）的长度
			  //scrollLeft可以获得水平滚动条滚动的距离
			  //scrollTop可以获得垂直滚动条滚动的距离
			//   alert(box4.scrollLeft); 
			   //clientHeight  可见区的高度
			//   alert(box4.clientHeight);//283
			//alert(box4.scrollHeight); //600
			/*当满足scrollHeight-scrollTop==clientHeight
			 说明垂直滚动条滚动到底了
			 当满足scrollWidth-scrollLeft==clientWidth
			 说明水平滚动条滚动到底了
			 * */
			alert(box4.scrollHeight-box4.scrollTop);
			/*当垂直滚动条滚动到底时使表单项可用
			 onscroll
			 该事件会在元素的滚动条滚动时触发
			 可以吧onscroll绑定在<p>标签上，如果<p>标签上有滚动条的话
			 disabled属性可以设置一个元素是否禁用
			 如果设置为true，则元素禁用
			 如果设置为false,则元素可用*/
			
			};
		};
	</script>

</head>

<body>
	<button id="btn01">点我一下</button>
	<br />
	<div id="box4">
		<div id="box5"></div>
	</div>
	<div id="box3" style="position: relative;"> 
	<div id="box2" style="position: relative;">
		<div id="box1"></div>
	</div>
	</div>

</body>

</html>