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 相关文章推荐
JavaScript面向对象之体会[总结]
Nov 13 Javascript
js 分栏效果实现代码
Aug 29 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
jQuery选择器全集详解
Nov 24 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
webpack3.0升级4.0的方法步骤
Apr 02 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
vue实现Toast组件轻提示
Apr 10 Vue.js
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
linux命令之调试工具strace的深入分析
2013/06/03 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
jquery密码强度校验
2015/12/02 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python字符串和字典相关操作的实例详解
2017/09/23 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
汽车销售求职自荐信
2013/10/01 职场文书
生物化学研究助理员求职信
2013/10/09 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
个人批评与自我批评
2014/10/15 职场文书
坎儿井导游词
2015/02/09 职场文书
接待员岗位职责
2015/02/13 职场文书
初一数学教学反思
2016/02/17 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS