JS获取非行间样式

时间:2021-03-01 12:22:38

我们都知道用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的非行间样式了。