为了提高用户体验，我们经常会动态修改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. ubuntu 下修改host文件

    原文地址:http://www.cnblogs.com/kingcat/archive/2012/02/23/2364509.html 有些时候,我们需要让某些域名指向本地,来实现调试,下面介绍下ub ...

  2. JavaScript & HTML5 Canvas 概览 更新时间2014-0411-1805

    HTML Canvas 坐标体系:矩形区域的左上角为坐标原点(0,0),向右为x轴,向下为y轴. 检测浏览器是否支持Canvas(IE系列从IE9开始支持): <!DOCTYPE html> ...

  3. Agri-Net（prim算法，最小生成树问题）

    看图便知道: 来来上代码:         #include <cstdio>#include <cstdlib>#include <cstring>#includ ...

  4. WebSphere应用服务器中https 请求协议的相关注意事项(服务器使用代理上Internet)

    最近遇到个需求需要web服务器应用通过https方式请求外部Internet服务器的接口,一开始本地测试时使用以下代码: String businessCode = "SH30580&quo ...

  5. 看小白如何解决ajax跨域问题

    由于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决ajax的跨域问题.本篇将讲述一个小白从遇到跨域不知道 ...

  6. JavaBean基础

    JavaBean的概念 JavaBean是一种可重复使用.且跨平台的软件组件.JavaBean可分为两种:一种是有用户界面(UI,User Interface)的JavaBean:还有一种是没有用户界 ...

  7. [Angular 2] Validation

    Define a filed should has validation: export class DemoFormSku { myForm: ControlGroup; sku: Abstract ...

  8. SDN：软件定义网络

    近期高级网络课的小组任务是在老师给定的范围内自选方向主题研究并做展示报告.我们组选了sdn.原以为这东西会是工业界无人问津的概念化产品,Google了一下却发现事实上sdn挺火的,因为它可能带来的可扩 ...

  9. 各种div+css居中方式调整（转载）

    盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码   目录(?) ...

  10. Android 模仿微信启动动画（转）

    本文内容 环境 项目结构 演示微信启动动画 本文演示微信启动动画.请点击此处下载,自行调试. 顺便抱怨一下,实践性(与研究性质的相对)技术博的“七宗罪”: 第一宗罪,错字连篇,逻辑不清: 第二宗罪,文 ...