为了提高用户体验，我们经常会动态修改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节点之样式的更多相关文章

  1. 原生js操作Dom节点:CRUD

    知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...

  2. JS 操作Dom节点之CURD

    许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...

  3. JS操作DOM节点查找

    JS中常用的DOM操作事件,包括有节点查找,键盘鼠标事件等等,本文内容介绍DOM的节点查找. <script> window.onload = function(){ //children ...

  4. JS操作DOM节点大全

    1.Javascript删除节点 在Javascript中,只提供了一种删除节点的方法:removeChild(). removeChild() 方法用来删除父节点的一个子节点. 语法:parent. ...

  5. ionic+微信js-sdk集成初步融合，在子路由页引入js操作dom节点

    .controller('yaoheCtrl',['$scope',function ($scope) { $scope.$watch('$viewContentLoaded',function(ev ...

  6. JavaScript操作DOM节点

    DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...

  7. 原生JS的DOM节点操作

    DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...

  8. js操作DOM对象

    js操作DOM对象  (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...

  9. 原生js操作DOM基础-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...

随机推荐

  1. Linux下动态库的使用

    1.生成动态库: gcc -fPIC -shared -o libdemo.so demo.c 考虑程式库major的升级会破坏兼容性:而minior的升级则可能不会,一般建议用以下方式来生成动态库. ...

  2. FZYZOJ-1880 【UFO】水管

    P1880 -- [ufo]水管 时间限制:1000MS      内存限制:131072KB      通过/提交人数:32/100 状态:      标签:    数学问题-组合数学   无    ...

  3. HDOJ(HDU) 2401 Baskets of Gold Coins(数列、)

    Problem Description You are given N baskets of gold coins. The baskets are numbered from 1 to N. In ...

  4. selenium grid java 资料

    Grid TestNG: 使用Selenium Grid改进Web应用程序的测试: http://www.ithov.com/server/117464.shtml

  5. Substrings - HDU 1238（最大共同子串）

    题目大意:给你N个串,求出来他们的最大公共子串的长度(子串反过来也算他们的子串).   分析:很久以前就做过这道题,当时是用的strstr做的,不过相同的都是枚举了子串......还是很暴力,希望下次 ...

  6. HTTP协议之状态码详解

    转自:http://www.cnblogs.com/TankXiao/ 什么是HTTP状态码 HTTP状态码的作用是:Web服务器用来告诉客户端,发生了什么事. 状态码位于HTTP Response ...

  7. 深入理解java垃圾回收算法

    Java虚拟机的内存区域中,程序计数器.虚拟机栈和本地方法栈三个区域是线程私有的,随线程生而生,随线程灭而灭:栈中的栈帧随着方法的进入和退出而进行入栈和出栈操作,每个栈帧中分配多少内存基本上是在类结构 ...

  8. Http报文 状态码

    一.HTTP报文 1.HTTP报文介绍 HTTP报文:用于HTTP协议交互的信息. HTTP报文由报文头部和报文主体(非必须)构成,中间由空行来分隔. 1.1 请求报文:客户端发起的报文. 1).报文 ...

  9. javascript、js操作json方法总结(json字符创转换json对象)

    相信前端的同学们对json并不陌生,接触过很多.但是很少人知道json的全称是什么,哈哈,我也是查资 料知道的.(JSON JavaScript Object Notation是一种轻量级的数据交换格 ...

  10. RHEL6.4编译安装gcc4.8.1

    因为平时用的linux虚拟机都是RHEL6.4, 自带的gcc版本号太低,不支持C++11,而从gcc4.8.1開始, gcc完美支持C++11全部特性. 故升级了一下. 以下是具体步骤: 1. 下载 ...