JS（十）-CSDN博客

本文链接：https://blog.csdn.net/MsStrbig/article/details/78670923

4：（1）DOM对CSS进行操作

box1.style.width="400px";

box1.style.height="400px";

box1.style.backgroundColor="yellowgreen";

//JS改变的样式会成为内联样式而覆盖当前样式表的样式；

但是如果样式表使用!important,则不能被覆盖;

alert(box1.currentStyle.backgroundColor);

alert(window.getComputedStyle(box1,null).backgroundColor);

通过currentStyle，getComputedStyle（）,获取的CSS样式不能修改只能读取，style读取的样式可以进行修改。

（1）兼容性问题的解决

functiongetStyle(obj , name){

if(window.getComputedStyle){

//正常浏览器的方式，具有getComputedStyle()方法

returngetComputedStyle(obj , null)[name];

}else{

//IE8的方式，没有getComputedStyle()方法

returnobj.currentStyle[name];

}

//returnwindow.getComputedStyle?getComputedStyle(obj ,null)[name]:obj.currentStyle[name];

（2）元素的属性：

1：clientwidth:当前宽度，不会返回单位只会返回具体的数字；clientheight:会获取元素的高度和宽度包括内容区和内边距这些属性可读，但是不能修改。

2：offsetheight，offsetwidth，获取高度和宽度，或获取所有的大小包括边框;

3:offsetparent可以获取当前元素的定位父元素，返回开启了定位的父元素（position）,如果都没有开启默认返回body元素；

4:scrollheight:滚动条的高度，scrollwidth:滚动条的宽度， scrollleft:滚动条滚动的距离，

ScrollTop:垂直滚动的距离。if(this.scrollHeight-this.scrollTop==this.clientHeight)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
				width: 300px;
				height:500px;
				background-color: #BBFFAA;
                overflow: auto;				
			}
		</style>
		<script type="text/javascript">
			//为id=info 标签来绑定一个滚动的事件；
			window.οnlοad=function(){
			var info =document.getElementById("info");
			var inputs=document.getElementsByTagName("input");
			//onscroll事件 ：该事件会在元素的滚动条滚动的时候触发；
			info.οnscrοll=function(){
				//当滚动条滚动到底的时候；
				if(this.scrollHeight-this.scrollTop==this.clientHeight)
				 {
				 	//表单项可用；
				 	inputs[0].disabled=false;
				 	inputs[1].disabled=false;
				 };
			}
			};
		</script>
	</head>
	<body>
		<h3>欢迎亲爱的用户注册！</h3>
		<p id="info">
			//文字自行补充；
		</p>
		<!--disabled="disabled"表单将变成不可用的-->
		<input type="checkbox" disabled="disabled"/>我已经阅读此协议一定遵守
		<input type="submit" value="注册" disabled="disabled"/>
	</body>
</html>