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版(约瑟夫环问题)
Aug 05 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
vue操作dom元素的3种方法示例
Sep 20 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 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 源代码压缩小工具
2009/12/22 PHP
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
php和html的区别点详细总结
2019/09/24 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
用实例说明python的*args和**kwargs用法
2013/11/01 Python
Python创建系统目录的方法
2015/03/11 Python
python检测是文件还是目录的方法
2015/07/03 Python
Python 正则表达式的高级用法
2016/12/04 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
python中二分查找法的实现方法
2020/12/06 Python
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
公务员培训心得体会
2013/12/28 职场文书
电子专业自荐信
2014/07/01 职场文书
治安消防安全责任书
2014/07/23 职场文书
酒会邀请函
2015/01/31 职场文书
财务部会计岗位职责
2015/02/03 职场文书
新闻稿标题
2015/07/18 职场文书