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 ...
随机推荐
- Ext JS 6 入门学习资料大全(2016-12-14)
现在 sencha touch已经升级为 Ext JS 6 了重新整理下资料 官方网站:https://www.sencha.com/ 在线文档:http://docs.sencha.com/extj ...
- 天猫浏览型应用的CDN静态化架构演变
原文链接:http://www.csdn.net/article/2014-01-22/2818227-CDN-Architecture 在天猫双11活动中,商品详情.店铺等浏览型系统,通常会承受超出 ...
- ArcGIS“一个或多个ActiveX控件无法显示...”问题的解决方案
ArcMap启动时的一个警告信息“一个或多个ActiveX控件无法显示...”,如图 出现这种情况,有可能的原因是IE浏览器的安全选项设置被修改了.比如被手动修改过,或者被第三方系统杀毒优化软件修改了 ...
- python之网络爬虫
一.演绎自已的北爱 踏上北漂的航班,开始演奏了我自已的北京爱情故事 二.爬虫1 1.网络爬虫的思路 首先:指定一个url,然后打开这个url地址,读其中的内容. 其次:从读取的内容中过滤关键字:这一步 ...
- 玩转PowerShell第二节——【利用PsExec进行远程调用】-技术&分享
概述 PowerShell用的最多的地方就是远程调用,在远程机器上执行脚本,监控远程机器的状态,如NLB状态,EventLog,SqlServer DataBase状态等. 本篇将讲到用PsExec. ...
- 两分钟了解REACTIVEX
可能在之前,你就已经看过这篇响应式编程的入门.什么?太长?好吧,这都没关系,Rx并不难,你甚至可以自己实现一个这样的框架. 知道数组吧?你当然知道,这就是: [ 14, 9, 5, 2, 10, 13 ...
- 一个关于explain出来为all的说明及优化
explain sql语句一个语句,得到如下结果,为什么已经创建了t_bill_invests.bid_id的索引,但却没有显示using index,而是显示all扫描方式呢,原来这还与select ...
- Linq专题之Linq查询from子句
Linq查询表达式包含8个常用的子句:from.where.select.join.into.orderby.group.let.我们来看看详细的说明. from: 指定查询操作的 ...
- 极简Unity调用Android方法
简介 之前写了篇unity和Android交互的教程,由于代码里面有些公司的代码,导致很多网友看不懂,并且确实有点小复杂,这里弄一个极简的版本 步骤 废话不多说,直接来步骤吧 1.创建工程,弄大概像这 ...
- VC Windows API获得桌面所有窗口句柄的方法
VC Windows API应用之GetDesktopWindow ——获得桌面所有窗口句柄的方法 Windows API Windows 这个多作业系统除了协调应用程序的执行.分配内存.管理资源…之 ...