本文介绍如何在JavaScript中获取元素的外链或内部非行内样式。针对标准浏览器，推荐使用window.getComputedStyle方法；而对于IE浏览器，则需使用obj.currentStyle属性。文章提供了完整的HTML与JS代码示例，展示了如何封装函数以统一处理不同浏览器下的样式获取需求。
获取非行内样式的挑战
通常，若需获取元素的行内样式，可直接通过document.getElementById("div1").style.width进行读取或设置，例如<div id="div1" style="width:500px;"></div>。然而，当样式定义在外链CSS文件（link标签引入）或页面内部的<style>块中时，上述方法无法直接获取这些非行内样式。
浏览器兼容解决方案
针对不同浏览器，获取外链或内部样式的方案有所区别。在标准浏览器中，可利用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="http://jb51.net/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>也要点击我哦。</p>
<div><a href="http://jb51.net">首页</a> <a href="http://jb51.net/phtml/">特效库</a> <a href="http://jb51.net/a/bjae/nb9lb3sd.htm">原文</a></div>
</body>
</html>以上介绍了JavaScript获取元素外链样式的实现方式，供参考使用。