JavaScript 学习—— js获取行间样式和非行间样式
1. 问题引入
<head>
<style>
#div1{
width:150px;
height:200px;
position:absolute;
left:-150px;
background: green;
}
</style>
<script>
window.onload = function(){
var oDiv1 = document.getElementById('div1');
alert(oDiv1.style.left); //获取left属性的值
}
</script>
</head> <body>
<div id="div1"></div>
</body>
上面代码的意思是想要获取得到id="div1"元素的left属性值。但是当我们运行上面代码的时候就会发现，弹窗弹出的内容确实什么都没有。
我们明明在<style></style>标签内定义了该元素的left属性，为什么alert(oDiv.style.left);确实返回一个什么都没有的弹窗呢？
其实，这个问题的原因是：oDiv1.style.left这样的格式来获取的left是非行间样式的left。
2. 什么是非行间样式？
非行间样式就是指不是写在标签体内的style属性的样式。如上面的代码中<style>....</style>内的定义的样式都是非行间样式。
3. 那什么是行间样式？
行间样式就是写在标签体内的样式：如，<div style="left:100px">，在这里left样式就是行间样式。
4. 那我们该如何获取行间样式呢？
要获取行间样式我们可以这样操作：
低版本ie浏览器下使用oDiv1.currentStyle.left;进行获取非行间样式。
其它浏览器下使用var style = window.getComputedStyle(oDiv1,null); //第二个参数直接传入null就行，没什么作用的。
alert(style.left); //便可以返回行间样式的left属性值
5. 整合在一起，兼容所有浏览器的代码：
window.onload = function(){
var oDiv1 = document.getElementById('div1');
if(oDiv1.currentStyle){
alert(oDiv1.currentStyle.left);
}else{
alert(getComputedStyle(oDiv1,null).left);
}
}
JavaScript 学习—— js获取行间样式和非行间样式的更多相关文章
- javascript获取行间样式和非行间样式--兼容写法
style:获取行间样式: currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意 ...
- JS获取非行间样式
我们都知道用offset函数获取元素样式是一件很方便的事,但是offset只能获取行间样式,而无法获得非行间样式,这是它的瓶颈所在. 我们都知道js获取行间样式的方法,那么js是如何获取行距样式的呢? ...
- js和jquery中获取非行间样式
样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相 ...
- js获取非行间样式/写入样式（行间）
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- javascript中获取非行间样式的方法
我们都知道一般在javascript中获取样式一般用的是nodeObj.style.attr这个属性的,但是这个属性只能获取行间样式非行间样式比如写在样式表中的样式那么用nodeObj.style.a ...
- JavaScript获取非行间样式/定义样式
html节点的样式分为以下几种 (1)浏览器默认样式 (2)引用样式(引用外部css文件的样式.style标签内定义的样式) 引用外部css样式:<link rel="styleshe ...
- js获取非行间样式/定义样式
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- js获取非行间样式或定义样式
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...
- js用currentStyle和getComputedStyle获取css样式（非行间） 兼容ie与火狐
用js的style属性可以获得html标签的样式,但是不能获取非行间样式.那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputed ...
随机推荐
- TeamViewer连接Windows8.1系统黑屏解决方案
TeamViewer用win7连接win8.1 都是64位系统,总是黑屏,可以看到鼠标也联动了,聊天传输文件都没有问题,反向用win8.1连接win7也没问题,而且TeamViewer更新到最新版本了 ...
- [LeetCode] Wildcard Matching 字符串匹配,kmp,回溯,dp
Implement wildcard pattern matching with support for '?' and '*'. '?' Matches any single character. ...
- 纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦
http://css-tricks.com/examples/ShapesOfCSS/
- 文件比对工具(Beyond Compare)
文件比对工具: 工具名称:Beyond Compare 版本号:v3.3.13 下载地址:http://i.cnblogs.com/Files.aspx 官网最新版本下载地址:http://www.s ...
- eclipse 手动/自动安装插件
只要你的Eclipse的压缩包,一般为xxx.zip,其内部包含了对应的features和plugins文件夹,(不管是否还有content.jar和artifacts.jar)则都可以: 要么手动解 ...
- 将excel导入mysql(使用navicat)
excel: 注: 1.mysql里建立一张跟excel一样的表结构的表(包含id) 2.excel最好没有任何格式,只是纯值,不然会出现导入不了的错误 ----------------------- ...
- 一个简单的3DTouch、Peek和Pop手势Demo，附github地址
参考文章:http://www.jianshu.com/p/74fe6cbc542b 下载链接:https://github.com/banchichen/3DTouch-PeekAndPopGest ...
- [SQL] SQL SERVER基础语法
Struct Query Language 1.3NF a.原子性 b.不能数据冗余 c.引用其他表的主键 2.约束 a.非空约束 b.主键约束 c.唯一约束 d.默认约束 e.检查约束 f.外键约束 ...
- Scrum 项目 7.0
------------------7.0------------------------------ Sprint回顾 1.回顾组织 主题:“我们怎样才能在下个sprint中做的更好?” 时间:设定 ...
- js页面跳转整理（转载未整理）
js方式的页面跳转1.window.location.href方式 <script language="JavaScript" type="text/java ...