JS基础学习（十）

来源：互联网发布：手机网页源码怎样测试编辑：程序博客网时间：2024/05/22 17:40

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.onload=function(){var info =document.getElementById("info");var inputs=document.getElementsByTagName("input");//onscroll事件 ：该事件会在元素的滚动条滚动的时候触发；info.onscroll=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>

阅读全文

0 0