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 ...
随机推荐
- Selenium webdriver 操作IE浏览器
V1.0版本:直接新建WebDriver使用 import org.openqa.selenium.WebDriver; import org.openqa.selenium.ie.InternetE ...
- Python里的map、reduce、filter、lambda、列表推导式
Map函数: 原型:map(function, sequence),作用是将一个列表映射到另一个列表, 使用方法: def f(x): return x**2 l = range(1,10) map( ...
- AE 3D摄像机工作原理
看了AE教程的3D可视化音频和序列法导入三维模型之后对于视频解析3D是有了更深的认识.很感谢AE在CS6之后加入了3D摄像机跟踪器的功能.它是通过摄像机跟踪反求来得到影片中的平面特征点.然后由用户指定 ...
- [AWS S3] Hosting a Static Website on Amazon S3
In this lesson, you will learn how to host a static website on Amazon S3. I will show you how to cre ...
- Meth | elementary OS常用配置
一,搜狗输入法 sudo apt-get remove ibussudo add-apt-repository ppa:fcitx-team/nightlysudo apt-get updatesud ...
- Maven常用插件--转
=========Maven Report Plugin========= 1.源码分析 <artifactId>maven-pmd-plugin</artifactId> 2 ...
- Adapter优化方案的探索
概要:使用Adapter的注意事项与优化方案本文的例子都可以在结尾处的示例代码连接中看到并下载,如果喜欢请star,如果觉得有纰漏请提交issue,如果你有更好的点子可以提交pull request. ...
- Android 系统移植与驱动开发--第二章搭建Android环境核心步骤及心得
第二章 搭建Android 开发环境 虽然在这一章中讲的是Android底层开发环境,但是相应伴随的还有Android NDK程序来测试Linux驱动,HAL程序库.底层开发不仅需要交叉编译环境,还要 ...
- 9.6noip模拟试题
题目名称 盘子序列 四轮车 点名 提交文件 disk.pas/c/cpp car.pas/c/cpp rollcall.pas/c/cpp 输入文件 disk.in car.in rollcall.i ...
- codevs 1183 泥泞的道路 （二分+SPFA+差分约束）
/* 二分答案(注意精度) 对于每一个答案 有(s1+s2+s3...)/(t1+t2+t3...)>=ans 时符合条件 这时ans有变大的空间 对于上述不等式如果枚举每一条路显得太暴力 化简 ...