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


Posted in Javascript onJune 06, 2016

一般给元素设置行内样式,如<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://3water.com/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://3water.com">首页</a> <a href="http://3water.com/phtml/">特效库</a> <a href="http://3water.com/a/bjae/nb9lb3sd.htm">原文</a></div>
</body>
</html>

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

Javascript 相关文章推荐
checkbox 多选框 联动实现代码
Oct 22 Javascript
JQuery的Alert消息框插件使用介绍
Oct 09 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
jquery中EasyUI实现同步树
Mar 01 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 Javascript
简单了解常用的JavaScript 库
Jul 16 Javascript
node.js cookie-parser之parser.js
Jun 06 #Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 #Javascript
node.js cookie-parser 中间件介绍
Jun 06 #Javascript
JavaScript 对象字面量讲解
Jun 06 #Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 #Javascript
js获取新浪天气接口的实现代码
Jun 06 #Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 #Javascript
You might like
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
javascript for循环设法提高性能
2010/02/24 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
Python读大数据txt
2016/03/28 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
Python中包的用法及安装
2020/02/11 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
社区巾帼文明岗事迹材料
2014/06/03 职场文书
校园安全广播稿范文
2014/09/25 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
出纳岗位职责范本
2015/03/31 职场文书
原告离婚代理词
2015/05/23 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
Python 中的 copy()和deepcopy()
2021/11/07 Python