JS 操作Dom节点之样式
为了提高用户体验，我们经常会动态修改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
JS 操作Dom节点之样式的更多相关文章
- 原生js操作Dom节点:CRUD
知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...
- JS 操作Dom节点之CURD
许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...
- JS操作DOM节点查找
JS中常用的DOM操作事件,包括有节点查找,键盘鼠标事件等等,本文内容介绍DOM的节点查找. <script> window.onload = function(){ //children ...
- JS操作DOM节点大全
1.Javascript删除节点 在Javascript中,只提供了一种删除节点的方法:removeChild(). removeChild() 方法用来删除父节点的一个子节点. 语法:parent. ...
- ionic+微信js-sdk集成初步融合，在子路由页引入js操作dom节点
.controller('yaoheCtrl',['$scope',function ($scope) { $scope.$watch('$viewContentLoaded',function(ev ...
- JavaScript操作DOM节点
DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...
- 原生JS的DOM节点操作
DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...
- js操作DOM对象
js操作DOM对象 (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
随机推荐
- 高效算法——G - 贪心
G - 贪心 Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Submit Status Desc ...
- Heavy Transportation
题目大意: 雨果的沉重运输是快乐的,当浮空运输出现故障时候他可以扩展业务, 但他需要一个聪明的人告诉他是否真的是一种把他的客户构建了巨型钢起重机的地方需要的所有街道都可以承受重量(这句是直接有道翻译的 ...
- JavaScript使用需要注意的细节
1.JavaScript区分大小写 在JavaScript中对象,变量.函数都是区分大小写的,例如: Object表示对象,Arrary表示数组,而写成object,arrary的时候JavaScri ...
- Windows下Postgre SQL数据库通过Slony-I 实现数据库双机同步备份
一. 我们要实现的环境是windows xp.windows2003上安装Postgre SQL数据库,实现目的是两台数据库服务器进行数据库同步,即数据库同步更新.删除.插入等对数据库的操作. 二. ...
- 火球-UML大战需求分析（体验版3.0.2）.pdf
火球-UML大战需求分析(体验版3.0.2).pdf http://files.cnblogs.com/files/happlyonline/%E7%81%AB%E7%90%83-UML%E5%A4% ...
- 构建服务端的AMD/CMD模块加载器
本文原文地址:http://trock.lofter.com/post/117023_1208040 . 引言: 在前端开发领域,相信大家对AMD/CMD规范一定不会陌生,尤其对requireJS. ...
- QT pro文件解析
在QT中使用qmake自动生成pro文件,如果要自己定制工程选项,则需要自行修改pro文件. pro文件有以下关键字:TEMPLATE.TARGET.DESTDIR.DEPENDPATH.INCLUD ...
- Android缓存技术
android应用程序中 1. 尽可能的把文件缓存到本地.可以是 memory,cache dir,甚至是放进 SD 卡中(比如大的图片和音视频). 可以设置双重缓冲,较大的图片或者音频放到SD ...
- C#—集合（Collection）
1.栈(stack<T>) using System; using System.Collections.Generic; using System.Linq; using System. ...
- gvim & vim
安装了 GVim for Windows. 一 普通功能配置 配置文件 _vimrc 在安装目录下面. 关闭闪屏和声音提示功能: set visualbell t_vb= "关闭visual ...