为了提高用户体验，我们经常会动态修改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. 移动UI自动化-Page Objects Pattern

    移动UI自动化,看起来美好,践行起来却难.做个目光短见的务实主义者.Page Objects Pattern是Selenium官方推崇的方式,最近研究写测试用例最佳实践之Page Objects,同时 ...

  2. entityframework分布式事务中遇到的 “与基础事务管理器的通信失败”的解决方法

    首先是ef的多数据库操作实现事务的方法 public int AddDifferenceDB(userinfo1 user1, userinfo user) { ; using (var test2D ...

  3. Ural1297 Palindrome（后缀数组）

        [题目链接] http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=12406 [题意] 求最长回文子串. [思路] 将字符串 ...

  4. Piggy-Bank（完全背包）

    /* http://acm.hdu.edu.cn/showproblem.php?pid=1114 完全背包问题 再判断背包能否装满 题意: 给出存空钱罐的重量以及装满时的重量 给出每种硬币的面值以及 ...

  5. [Locked] Shortest Distance from All Buildings

    Shortest Distance from All Buildings You want to build a house on an empty land which reaches all bu ...

  6. [置顶] C++中RTTI机制剖析

    C++中要想在运行时获取类型信息,可没有Java中那么方便,Java中任何一个类都可以通过反射机制来获取类的基本信息(接口.父类.方法.属性.Annotation等),而且Java中还提供了一个关键字 ...

  7. easyUI属性总结

    1.div easyui-window        生成一个window窗口样式.      属性如下:                   1)modal:是否生成模态窗口.true[是] fal ...

  8. Android中监听ScrollView滑动停止和滑动到底部

    1.监听ScrollView滑动停止: /********************监听ScrollView滑动停止*****************************/ scrollView.s ...

  9. "Storage Virtualization" VS "Software-Defined Storage"

    http://www.computerweekly.com/blogs/StorageBuzz/2013/07/storage-virtualisation-vs-soft.html 这篇blog的目 ...

  10. 亲测 安装 mysql5.5 64位

    1.选择 customn 更改安装目录2.选择 develop 模式,默认,占用内存较小. server machine 中等内存 dedicate mysql server machine 专用服务 ...