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 ...
随机推荐
- 纠结的CLI C++与Native C++的交互
最近在写点东西,涉及到了CLR C++与Native C++的互相调用的问题,结果...........纠结啊. 交互原型 交互原型是这样的: void* avio_alloc_context( un ...
- redis 集群
http://www.linuxidc.com/Linux/2015-08/121845.htm Redis3.0版本之后支持Cluster,具体介绍redis集群我就不多说,了解请看redis中文简 ...
- crowd在更改IP后无法登录的问题
org.codehaus.xfire.fault.XFireFault: Client with address "192.168.1.222", and hostname &qu ...
- JQuery的Ajax跨域请求的
JQuery的Ajax跨域请求的(Ajax) 什么是jsonp格式呢?API原文:假设获取的数据文件存放在远程server上(域名不同.也就是跨域获取数据),则须要使用jsonp类型.使用这样的类型的 ...
- PHP安全编程：shell命令注入(转)
使用系统命令是一项危险的操作,尤其在你试图使用远程数据来构造要执行的命令时更是如此.如果使用了被污染数据,命令注入漏洞就产生了. exec()是用于执行shell命令的函数.它返回执行并返回命令输出的 ...
- 从零开始学习jquery （二）
前面我们了解到了如何获取使用jquery,下面我们主要看看jquery的一些语法.基本的语法 $(selector).action(). 美元符号定义 jQuery 选择符(selector)&quo ...
- [转] 设计模式 -- Facade
PS:Façade模式注重简化接口,Adapter模式注重转换接口,Bridge模式注重分离接口(抽象)与其实现,Decorator模式注重稳定接口的前提下为对象扩展功能. Facade模式 Faca ...
- [转] C语言多维数组与多级指针
http://c.biancheng.net/cpp/html/477.html 多维数组与多级指针也是初学者感觉迷糊的一个地方.超过二维的数组和超过二级的指针其实并不多用.如果能弄明白二维数组与二级 ...
- centos 安装 lnmp
直接yum install nginx不行,要先处理下源,下面是安装完整流程 1. rpm -ivh http://nginx.org/packages/centos/6/noarch/RPMS/ng ...
- checkbox 删除
先创建del.php文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...