我们都知道用offset函数获取元素样式是一件很方便的事，但是offset只能获取行间样式，而无法获得非行间样式，这是它的瓶颈所在。

我们都知道js获取行间样式的方法，那么js是如何获取行距样式的呢？

首先让我们看一下js是如何获取行间样式的:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取<span class="wp_keywordlink_affiliate"><a href="http://www.webclks.com/archives/tag/%e8%a1%8c%e9%97%b4%e6%a0%b7%e5%bc%8f" title="查看行间样式中的全部文章" target="_blank">行间样式</a></span></title>
<script>
window.onload=function ()
{
var oDiv=document.getElementById("div1");
alert(oDiv.style.width);
}
</script>
</head>

<body>
<div id="div1" style="width:200px; height:200px; background:red;"></div>
</body>
</html>
 

大家运行代码可以看到我们这样就获取到了div的行间样式的宽度为200px，那么如果我们现在写的不是行间样式还能获取到div的样式吗？我们把上面的代码变一下，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取行间样式</title>
<style>
#div{width:200px; height:200px; background:red;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById("div1");
alert(oDiv.style.width);
}
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

 

我们运行代码可以看到在这种情况下我们是无法获取到div的宽度属性值了，如果我们想要在现在的情况下获取到div的宽度属性值，我们又应该怎么操作呢？解决方案：引入currentStyle；我们把上面的代码改一下，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取<span class="wp_keywordlink_affiliate"><a href="http://www.webclks.com/archives/tag/%e9%9d%9e%e8%a1%8c%e9%97%b4%e6%a0%b7%e5%bc%8f" title="查看非行间样式中的全部文章" target="_blank">非行间样式</a></span></title>
<style>
#div1{width:200px; height:200px; background:red;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById("div1");
alert(oDiv.currentStyle.width);
}
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

 

我们在运行代码，OK，IE里面现在是没问题，证明上面的代码很好用，但是当我们用FF浏览器打开的时候，页面出问题了，在这儿补充一点：但凡是好用的代码99%以上不兼容，那么我们怎么办？解决方案：引入getComputedStyle；getComputedStyle（oDiv， false）.width;第一个参数要获取物体的样式，第二个暂时没发现有什么用处，可以随便放；我们把上面代码修改一下，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>获取行间样式</title>

<style>

#div{width:200px; height:200px; background:red;}

</style>

<script>

window.onload=function ()

{

 var oDiv=document.getElementById("div1");

 alert(oDiv.style.width);

}

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>

我们运行代码可以看到FF已经没问题，但是接下来看我的IE浏览器，又出现问题，说明咱们用的这两个方法都是不兼容的，所以我们要找到一种解决办法，让所有的浏览器都要兼容。我们再把上面的代码做一下修改，代码如下：

<textarea name="run_j57" id="run_j57">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

&lt;head&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;

&lt;title&gt;获取行间样式&lt;/title&gt;

&lt;style&gt;

#div1{width:200px; height:200px; background:red;}

&lt;/style&gt;

&lt;script&gt;

window.onload=function ()

{

 var oDiv=document.getElementById("div1");

 if(oDiv.currentStyle) //IE下为真，FF下为假

 {

     alert(oDiv.currentStyle.width)

 }

 else

 {

     alert(oDiv.getComputedStyle(oDiv, false).width);

 }

}

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div id="div1"&gt;&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;</textarea>
 

好的，现在我们再运行代码试一下，IE、FF都没有问题了，当然你也可以测试更多浏览器，完全是没问题。到此咱们就可以完美的获取到div的非行间样式了。

JS获取非行间样式的更多相关文章

  1. js获取非行间样式/定义样式

    <!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...

  2. JS获取非行间样式及兼容问题

    获取非行间样式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. js获取非行间样式或定义样式

    <!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...

  4. js获取非行间样式/写入样式（行间）

    <!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...

  5. js 获取非行间样式

    1.getComputedStyle(nodeObj,false):该方法是BOM对象,第一个是要获取样式的节点对象:第二个可以写成任何的字符一般写成false或者null,这里最好是用false因为 ...

  6. js和jquery中获取非行间样式

    样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相 ...

  7. js兼容总结之获取非行间样式

    非行间样式案例 #div1 { width: 200px; height: 200px; background: red; } IE获取非行间样式 var oDiv = document.getEle ...

  8. JavaScript获取非行间样式/定义样式

    html节点的样式分为以下几种 (1)浏览器默认样式 (2)引用样式(引用外部css文件的样式.style标签内定义的样式) 引用外部css样式:<link rel="styleshe ...

  9. 原生js提取非行间样式

    js用style属性可以获得html标签的样式,但是不能获取非行间样式,如何获取css的非行间样式呢,在低版本ie我们可以用currentStyle,在其他浏览器我们可以用getComputedSty ...

随机推荐

  1. c#操作Excel时，抛出异常：“未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序”

    我们开发环境下,使用excel导入数据到数据库中,编译的软件起初是x86 方式,起初并未发现什么问题,一切很正常: 程序该进的过程: 后来导入文件一次就要读取几百G的数据导入数据库中,使用编译的X86 ...

  2. 企业Openvpn环境部署

                   企业Openvpn环境部署                                         作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任 ...

  3. JAVA多线程与多进程

    并发与并行是两个既相似而又不相同的概念,但往往容易混为一谈,这两者究竟有什么区别呢?本文通过一个例子让你更好地理解(本文由并发编程网翻译). 现代社会是并行的:多核.网络.云计算.用户负载,并发技术对 ...

  4. PHP和JS实现多按钮提交表单

    JS: <html> <head> <script> function submitit1() //交由程序1处理 { document.myForm.action ...

  5. 2-sat(石头、剪刀、布)hdu4115

    Eliminate the Conflict Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/O ...

  6. 查看真机的系统中sdk的版本

    1.adb devices 确保连接上了真机 2.adb shell 进入android系统 3.进入system目录下 4.查看build.prop文件 cat build.prop

  7. Hbase HRegionServer启动后自动关闭

    突然发现HBASE无法使用了. 然后看到在分布式的情况下,节点上的HRegionServer启动后自动关闭. 同步时间就能解决这个问题. 网上同步时间 1.  安装ntpdate工具 sudo apt ...

  8. paper 45：latex的使用

    本教程面向对LaTeX完全无认知无基础的新人. 旨在让新人能够用最简单快捷的方式,轻松入门,能够迅速使用LaTeX完成基本的文本编辑. 尤其旨在破除部分新人对LaTeX在传闻中难以学习的恐惧感. 在入 ...

  9. android环境搭建—— 工欲善其事必先利其器

    安卓开发环境配置: 准备软件 a)  JDK  点击下载 b)   adt-bundle-windows-x86-20140702.zip   点击下载 [sdk + 特定版本platform + e ...

  10. 深入了解webservice_概念总结

    最近公司需要对java web端的第三方接口进行测试,使用WebService+TestNG实现,TsetNg是常用的自动化测试框架,这就不介绍了. WebService是一种跨编程语言和跨操作系统平 ...