为了提高用户体验，我们经常会动态修改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. [Locked] Alien Dictionary

    Alien Dictionary There is a new alien language which uses the latin alphabet. However, the order amo ...

  2. lightoj 1291 无向图边双联通+缩点统计叶节点

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1291 #include<cstdio> #include<cstri ...

  3. MyBatis总结-实现关联表查询

    一.一对一关联 1.1.提出需求 根据班级id查询班级信息(带老师的信息) 1.2.创建表和数据 创建一张教师表和班级表,这里我们假设一个老师只负责教一个班,那么老师和班级之间的关系就是一种一对一的关 ...

  4. 关于URL重写

    1.  为什么要使用url重写? 先从session的原理讲起,为什么我们能够获得session中的东西呢?如果没有禁用cookie的话,那么session创建之后,会将session id的值通过r ...

  5. OpenCV 编码样式指南

    OpenCV 编码样式指南   前言 本文档是对OpenCV中代码风格的简短说明,因为OpenCV的核心库(cv,cvaux)是用C和C++编写的,所以本文档仅对用C和C++代码的编写有效.   文件 ...

  6. Android xml 解析

    XML 经常使用的三种解析方式: DOM: 所有载入到内存,生成一个树状结构,占用内存比較大. SAJ: 採用事件驱动,速度快,效率高,不支持回退. PULL:也是採用事件驱动,语法简洁. 步骤: 1 ...

  7. TI C66x DSP 系统events及其应用 - 5.10（创建ISR的三种情况）

    ISFP是服务中断的指令包,创建ISR的三种情况: 1.一个ISFP包的8条指令就能够满足ISR watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl5ZW ...

  8. cocos2d-x项目过程记录(纹理和内存优化方面)

    1.参考资料:Cocos2d-x纹理优化的一些方案  cocos2d-x如何优化内存的应用  iOS和android游戏纹理优化和内存优化(cocos2d-x) 2.加载贴图集纹理 CCSpriteF ...

  9. Ubuntu知识记录

    1.激活root用户:sudo passwd root 2.安装ftp:apt-get install vsftpd,修改配置文件/etc/vsftpd.conf write_enable=yes表明 ...

  10. 动态用javascript来修改单选框性别

    <script> window.onload=function(){ if(<{$data.sex}>==0){//<{$data.sex}>是在数据读出来: do ...