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 ...
随机推荐
- 【eoe 6】ActionBar的使用
一. Action Bar 一般位于屏幕顶部,包括四个可操作区域: 应用图标或LOGO区域,用于视图控制的Spinner下拉菜单或TAB控件区域, Action button(也称为Action It ...
- SmartJS 系列规划分享和背景介绍
发布了smartjs后,有朋友问:“没看懂究竟是干嘛的”.唉,打击了,每次我都想高唱其实你不懂我的心. 今天把相关的东西都整理了一遍,给大家介绍一下.里面绝大多数都已经实现过,有些则是有新的思路重做或 ...
- 用 .NET Reflector 8 查看 System.Windows.Controls 命名空间下的类
为了学习自定义控件,就想看看WPF基本元素的代码.使用到工具.NET Reflector. System.Windows.Controls 命名空间在PresentationFramework.dll ...
- Uvaoj 11248 Frequency Hopping(Dinic求最小割)
题意:1到n节点(节点之间有一定的容量),需要流过C的流量,问是否可以?如果可以输出possible, 否则如果可以扩大任意一条边的容量 可以达到目的,那么输出possible option:接着输出 ...
- Cwinux简介及用法简述
我在我的个人博客上发表了一篇文章 Cwinux简介及用法简述 http://apprentice89.com/cwinux_introduction_and_use/
- JS魔法堂：那些困扰你的DOM集合类型
一.前言 大家先看看下面的js,猜猜结果会怎样吧! 可选答案: ①. 获取id属性值为id的节点元素 ②. 抛namedItem is undefined的异常 var nodes = documen ...
- 利用session做国际化引起的old区内存爆满及修复方法
题记:昨天加班打车回家,看见前面有辆路虎在高速上开的巨慢,挡住了我坐的出租车的路,于是就跟司机吐槽了一句:“前面这车怎么这么面啊?”,司机沉默了大概3秒,说了一句富含哲理性的话:“没有面车,只有面人” ...
- ompparticles.cpp:(.text+0x322): undefined reference to `omp_set_num_threads'
参考 http://www.code-by.org/viewtopic.php?f=54&t=163
- 重构第17天提取父类(Extract SuperClass)
今天的重构来自 Martin Fowler的http://refactoring.com/catalog/extractSuperclass.html. 理解:本文中的“提取父类”是指类中有一些字段或 ...
- AEAI DP开发平台升级说明
本次发版的AEAI DP_v3.5.0版本为AEAI DP _v3.4.0版本的升级版本,该产品现已开源并上传至开源社区http://www.oschina.net/p/aeaidp. 1 升级说明 ...