我们都知道用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. ajax提交含有html数据时的处理方法

    这两天在做一个文章内修改的功能,由于前端选用的Extjs控件库,于是就使用Ext.form.HtmlEditor. 在使用ajax提交数据的时候,需要提交包含有html代码的数据.这时候问题就来了,不 ...

  2. ls常用参数

    ls常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 玩Linux的老司机们每天都要敲的命令,但是这个鸡蛋的命令还有很多中玩法哟~跟着我一起敲一遍吧!在这里我就列举几个常 ...

  3. [转] HashMap和HashSet的区别

    HashMap和HashSet的区别是Java面试中最常被问到的问题.如果没有涉及到Collection框架以及多线程的面试,可以说是不完整.而Collection框架的问题不涉及到HashSet和H ...

  4. php setcookie(name, value, expires, path, domain, secure) 参数详解

    setcookie() 定义一个和其余的 HTTP 标头一起发送的 cookie.和其它标头一样,cookie 必须在脚本的任何其它输出之前发送(这是协议限制).这 需要将本函数的调用放到任何输出之前 ...

  5. 使用UIL（Universal-Image-Loader）异步加载图片

    概要: Android-Universal-Image-Loader是一个开源的UI组件程序,该项目的目的是实现可重复使用的异步图像加载.缓存和显示.所以,如果你的程序里需要这个功能的话,使用它,因为 ...

  6. 夺命雷公狗ThinkPHP项目之----企业网站6之栏目的添加（主要用模型来验证字段）

    我们刚才的控制器已经写好了,那么我们现在就来完成我们的模型, 首先我们在Model目录下创建一个CategoryModel.class.php 代码如下: <?php namespace Adm ...

  7. JSP-01-搭建Web应用环境

    一.搭建Web应用环境 Tomcat 下载会有两种版本,安装版和解压版,这里以解压版为例 Web服务: 是实现“基于Web无缝集成”的目标而提出的全新概念,希望通过Web服务能够实现不同的系统之间的相 ...

  8. 深入Java核心　探秘Java垃圾回收机制（转自http://edu.21cn.com/java/g_189_859836-1.htm）

    垃圾收集GC(Garbage Collection)是Java语言的核心技术之一,之前我们曾专门探讨过Java 7新增的垃圾回收器G1的新特性,但在JVM的内部运行机制上看,Java的垃圾回收原理与机 ...

  9. shell 加减乘除

    #!/bin/basha=$1b=$2echo a+b=$(($a+$b))echo a-b=$(($a-$b))echo a*b=$(($a*$b))echo a/b=$(($a/$b))echo ...

  10. lamp环境编译(实际通过)

    CentOS:5.5Apache:2.2.9PHP:5.2.6MySQL:5.0.41 条件: yum install gccyum install gcc-c++ vi/etc/yum.repos. ...