js获取元素外链样式的方法
更新时间：2015年01月27日 10:31:30 投稿：shichen2014
这篇文章主要介绍了js获取元素外链样式的方法,分别在标准浏览器与IE浏览器两种情况下实现获取对应样式的功能,是非常实用的技巧,需要的朋友可以参考下
本文实例讲述了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="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;
}
<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程序设计有所帮助。
相关文章
在本篇文章里小编给大家分享的是关于javascript中的with语句学习笔记及用法，有需要的朋友们可以学习下。2020-02-02
深入理解事件冒泡(Bubble)和事件捕捉(capture)
下面小编就为大家带来一篇深入理解事件冒泡(Bubble)和事件捕捉(capture)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了JavaScript中new操作符的解析和实现，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下2020-09-09
这篇文章主要为大家详细介绍了纯js+css实现在线时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
其实防抖和节流不仅仅在面试中会让大家手写，在实际项目中也可以起到性能优化的作用，所以还是很有必要掌握的。本文就带大家彻底学会JavaScript手写防抖节流，需要的可以参考一下2022-11-11
这篇文章主要为大家详细介绍了js实现鼠标单击Tab表单切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-05-05
JavaScript 提供了 automatic semicolon insertion (ASI)自动插入分号规则,在不加分号的情况下,会自动补充分号来分隔不同语句,下面我们就来具体了解一下这一规则吧2024-01-01
网站信任度：一方面指浏览者对于站点的信任程度,另一方面指搜索引擎对于网站的信任值（TrustRank）,网站信任度对于企业站点更为重要.在得到更高信任度的同时,流量更容易转化为实在的收入.2008-10-10
通过action传过来的值在option获取进行验证，下面有个不错的示例，需要的朋友不要错过2013-11-11
curl命令查看请求响应时间的方法非常简单，今天小编抽空给大家介绍下使用Curl命令查看请求响应时间方法，感兴趣的朋友一起看看吧2016-11-11
最新评论