js获取元素的外链样式

时间：2022-03-07 08:50:26
 一般给元素设置行内样式，如<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="http://keleyi.com/keleyi/pmedia/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://keleyi.com">首页</a> <a href="http://keleyi.com/keleyi/phtml/">特效库</a> <a href="http://keleyi.com/a/bjae/nb9lb3sd.htm">原文</a></div>

 </body>

 </html>

 本文转载自柯乐义http://keleyi.com/a/bjae/nb9lb3sd.htm

相关文章