js获取非行间样式

js获取非行间样式

2014年06月03日 ⁄ Javascript ⁄
共 3443字 ⁄ 字号 小 中 大 ⁄ 暂无评论 ⁄
阅读 186 ℃ 次

<iframe scrolling="no" frameborder="0" marginheight="0" marginwidth="0" border="0" src="http://www.taobao.com/go/act/sale/300x250danpin0911.php?refpos=,a,null&pid=mm_26997931_7282620_24348671&upvid=2is2_1408890388161611&src=talos&r=http%3A%2F%2Fwww.baidu.com%2Fs%3Fie%3Dutf-8%26f%3D8%26rsv_bp%3D1%26tn%3Dbaidu%26wd%3D%25E5%25A6%2582%25E4%25BD%2595%25E8%258E%25B7%25E5%258F%2596%25E9%259D%259E%25E8%25A1%258C%25E9%2597%25B4%25E6%25A0%25B7%25E5%25BC%258F%26rsv_enter%3D1%26rsv_sug3%3D34%26rsv_sug4%3D1623%26rsv_sug1%3D13%26rsv_sug2%3D0%26inputT%3D17607&u=http%3A%2F%2Fwww.webclks.com%2Farchives%2F918" style="margin: 0px; padding: 0px; border-width: 0px; background-color: transparent; word-wrap: break-word; width: 300px; height: 250px; "></iframe>

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

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

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

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

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

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

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