js获取元素的外链样式的简单实现方法

 更新时间:2016年06月06日 12:00:28   投稿:jingxian  
下面小编就为大家带来一篇js获取元素的外链样式的简单实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

一般给元素设置行内样式,如<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://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>

以上这篇js获取元素的外链样式的简单实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • bootstrap手风琴制作方法详解

    bootstrap手风琴制作方法详解

    这篇文章主要为大家详细介绍了bootstrap手风琴的制作方法,制作声明式触发手风琴,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JavaScript在浏览器中的执行机制

    JavaScript在浏览器中的执行机制

    既然说到了JavaScript,那么就会绕不过去执行上下文,只有理解了执行上下文才能更好的理解JavaScript本身,不过本部分不是专门讲解 JavaScript的,主要从JavaScript的执行顺序开始介绍一下JavaScript是怎样运行的
    2023-09-09
  • 使用Typescript开发微信小程序的步骤详解

    使用Typescript开发微信小程序的步骤详解

    这篇文章主要介绍了使用Typescript开发微信小程序的步骤详解,本文分步骤通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • javascript如何使用bind指定接收者

    javascript如何使用bind指定接收者

    这篇文章主要介绍了javascript如何使用bind指定接收者,需要的朋友可以参考下
    2014-05-05
  • JS实现简单的九宫格抽奖

    JS实现简单的九宫格抽奖

    这篇文章主要为大家详细介绍了JS实现简单的九宫格抽奖,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 利用图片的 onerror 事件载入默认图片

    利用图片的 onerror 事件载入默认图片

    当图片不存在时载入默认图片的代码
    2009-12-12
  • 微信小程序点击左上角返回弹窗提示解决思路

    微信小程序点击左上角返回弹窗提示解决思路

    当页面表单没有提交直接返回时,要提示用户是否保存当前信息,如果已经提交就不提示了,下面小编给大家带来了微信小程序点击左上角返回弹窗提示解决思路,感兴趣的朋友一起看看吧
    2024-06-06
  • javascript跨域请求包装函数与用法示例

    javascript跨域请求包装函数与用法示例

    这篇文章主要介绍了javascript跨域请求包装函数与用法,结合实例形式分析了javascript基于ajax的跨域请求封装函数与相关使用技巧,需要的朋友可以参考下
    2016-11-11
  • 微信小程序实现吸顶效果的方法实例

    微信小程序实现吸顶效果的方法实例

    在微信小程序的开发中,经常会有列表分类标签随着界面滚动吸顶的效果,下面这篇文章主要给大家介绍了关于微信小程序实现吸顶效果的相关资料,需要的朋友可以参考下
    2021-08-08
  • 给ListBox添加双击事件示例代码

    给ListBox添加双击事件示例代码

    如何给ListBox添加双击事件,想必有很多的新手朋友们都不会吧,下面有个不错的示例,感兴趣的朋友可以参考下
    2013-12-12

最新评论