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 相关文章推荐
JS倒计时代码汇总
Nov 25 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
用js实现博客打赏功能
Oct 24 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
微信小程序转发事件实现解析
Oct 22 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
Js和VUE实现跑马灯效果
May 25 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 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
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
在Python的Django框架中加载模版的方法
2015/07/16 Python
python框架中flask知识点总结
2018/08/17 Python
python中的decimal类型转换实例详解
2019/06/26 Python
python3实现mysql导出excel的方法
2019/07/31 Python
python装饰器使用实例详解
2019/12/14 Python
阿波罗盒子:Apollo Box
2017/08/14 全球购物
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
高中化学教学反思
2014/01/13 职场文书
实习评语大全
2014/04/26 职场文书
爱耳日活动总结
2014/04/30 职场文书
人民调解协议书范本
2014/10/11 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
工作感言一句话
2015/08/01 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs