JavaScript获取元素外链样式的方法

JavaScript获取元素外链样式的方法

本文介绍一种通过JavaScript获取元素外链样式的方法，供读者参考。

通常，若元素设置了行内样式，例如<div id="div1" style="width:500px;"></div>，可直接通过document.getElementById("div1").style.width读取或修改。然而，当样式定义在外链<link>标签或页面内部非行内样式中时，上述方法无法直接获取。

在标准浏览器中，可利用window.getComputedStyll(obj,null)[property]来获取外链样式；而在IE浏览器中，则需通过obj.currentStyle属性进行获取。

完整的HTML代码如下：

<!DOCTYPE html>
<html>
<head>
<title>js获取元素外链样式</title><base target="_blank"/>
<style type="text/css">
p {
width: 500px;
line-height: 30px;
}
</style>
<script src="jquery/jquery-1.11.2.min.js">
</script>
<script>
function getstyle(obj,property){
if(obj.currentStyle){
return obj.currentStyle[property];
}else if(window.getComputedStyle){
return document.defaultView.getComputedStyle(obj,null)[property];//或者也可以通过window.getComputedStyle来获取样式
}
return null;
}
$(document).ready(function(){
$("p").click(function(){
alert(getstyle(this,"width"));
});
});
</script>
</head>
<body>
<p style="width:750px;">如果您点击我，弹出宽度。</p>
<p>点击我，弹出宽度。</p>
<p>也要点击我~O(∩_∩)O~。</p>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。