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 ...
随机推荐
- ARM机器码分析
我们编写的汇编程序还是不够底层,CPU都是对机器码进行操作的,所以还需要用汇编器将汇编代码转换成机器码才能被CPU处理.下面举几个例子来说说分析ARM机器码的方法. 对编译连接之后得到的ELF进行反汇 ...
- Android Json数据解析
1.通过主Activity的Button按钮进行解析 public class MainActivity extends Activity { private Button button=null; ...
- 什么是Socket，为什么要用Socket
应用层通过传输层进行数据通信时,TCP和UDP会遇到同时为多个应用程序进程提供并发服务的问题.多个TCP连接或多个应用程序进程可能需要通过同一个TCP协议端口传输数据.为了区别不同的应用程序进程和连接 ...
- 自定义WCF的配置文件
原文地址:http://www.cnblogs.com/shanyou/archive/2008/12/02/1346298.html WCF的承载既可以通过编码实现,也能够通过配置实现.而且使用配置 ...
- 动态规划——数位dp
通过先前在<动态规划——背包问题>中关于动态规划的初探,我们其实可以看到,动态规划其实不是像凸包.扩展欧几里得等是具体的算法,而是一种在解决问题中决策的思想.在不同的题目中,我们都需要根据 ...
- zoj 2404 最小费用流
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2404 #include <cstdio> #incl ...
- Linux 守护进程的启动方法
守护进程”(daemon)就是一直在后台运行的进程(daemon). 本文介绍如何将一个 Web 应用,启动为守护进程. 一.问题的由来 Web应用写好后,下一件事就是启动,让它一直在后台运行. 这并 ...
- maven clean 报错
eclipse在使用maven的tomcat控件编译java程序时,报错 Failed to execute goal org.apache.maven.plugins:maven-clean-plu ...
- opencv_形态学结构化元素对形态学图像处理的影响
场景 对大米预处理之后的二值图像做开运算再做canny边缘检测. python代码: # kernel = cv2.getStructuringElement(cv2.MORPH_ELLIPSE,(3 ...
- QML 语言基础
在<Qt Quick 简单介绍>中我们提到 QML 语法和 Json 相似,请參考<Qt on Android: http下载与Json解析>查看 Json 语法.当然这里我们 ...