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 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 Javascript
js 返回时间戳所对应的具体时间
Jul 20 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
vue+element实现动态加载表单
Dec 13 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
YII中assets的使用示例
2014/07/31 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
基于jquery的跨域调用文件
2010/11/19 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
js html实现计算器功能
2018/11/13 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
python使用socket创建tcp服务器和客户端
2018/04/12 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
Python创建临时文件和文件夹
2020/08/05 Python
python中的插入排序的简单用法
2021/01/19 Python
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
绘画设计学生的个人自我评价
2013/09/20 职场文书
大学生优秀的自我评价分享
2013/10/22 职场文书
初中生操行评语大全
2014/04/24 职场文书
融资合作协议书范本
2014/10/17 职场文书
应届毕业生自荐信
2015/03/04 职场文书
Java实现二分搜索树的示例代码
2022/03/17 Java/Android