您的位置：首页 > Web前端 > CSS

JS 操作Dom节点之样式

2014-07-14 10:01 405 查看

为了提高用户体验，我们经常会动态修改Dom节点的样式，各种浏览器差异比较大，我们如何应对？不断尝试，不断总结~！

1. style、getComputedStyle、currentStyle

内嵌样式：

<!--body -->
<div style="width: 30px;background-color: #ff6a00;">我就是傻里傻气的，完全素颜！</div>

1 //内联样式优先级最高，通过style获取的样式是最准确的
2 var elm = document.getElementById('J-demo');
3
4 //通常这样获取
5 elm.style.width
6 elm.style.backgroundColor

内联样式、外部样式：

<!--css-->
<link ref="stylesheet" href="demo.css">

<style>
.demo {
width: 30px;
background-color: #ff6a00;
}
</style>

<!--body -->
<div id="J-demo" class="demo">你想那么容易看我素颜？没那么容易...</div>

var elm = document.getElementById('J-demo'),
elmStyle;

elm.style.xxx  //只能获取定义的内联样式

//如果标签没有定义相关的内联样式，应该这么办：
elmStyle = elm.currentStyle ? elm.currentStyle.getAttribute('background-color') : window.getComputedStyle(elm, null).getPropertyValue('background-color');

getPropertyValue(name)   //name不要使用驼峰命名的名称
getAttribute(name)  //如果考虑该死的IE6， name 必须是驼峰命名的名称

//为什么不用下标[name]来获取属性值呢？
//浏览器对样式属性解释名称不一样，比如float，有的叫cssFloat，有的叫styleFloat

2. screen属性

//显示器可用宽度、高度，不包含任务栏
availWidth、availHeight

//显示器屏幕的宽度、高度
width、height

3. 元素视图方法、属性

//让元素滚动到可视区域
scrollIntoView()

//内容区域的左上角相对于整个元素左上角的位置（包括边框）
clientLeft
clientTop

//内容区域的高度和宽度，包括padding，不包括边框和滚动条
clientWidth
clientHeight

//相对于最近的祖先定位元素的偏移值
offsetLeft
offsetTop

//返回最近的且定位的祖先元素
offsetParent

//offsetParent元素只可能是下面这几种情况:
//1. <body>
//2. position不是static的元素
//3. <table>, <th> 或<td>，但必须要position: static

//整个元素的尺寸（包括边框）
offsetWidth
offsetHeight

//元素滚动的像素大小,可读可写
scrollLeft
scrollTop

//整个内容区域的宽高，包括隐藏部分
scrollWidth
scrollHeight
//兼容问题：当外层元素没有设置overflow，但内容超过外层元素宽高时，浏览器获取的值将不准确
//解决方法：对外层元素设置overflow属性

4. 鼠标位置

//鼠标相对于window的偏移
event.clientX
event.clientY

//鼠标相对于显示器屏幕的偏移坐标
event.screenX
event.screenY

.Thingking

学会这些通用的样式处理方法，操作Dom样式，制作出漂亮的页面style，将会更加得心应手。

Reference: http://www.quirksmode.org/dom/w3c_cssom.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航