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 兼容firefox的一些问题
May 21 Javascript
jquery将一个表单序列化为一个对象的方法
Jan 03 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
Vue动态组件实例解析
Aug 20 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
vue proxy 的优势与使用场景实现
Jun 15 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图像处理类代码分享
2012/01/19 PHP
php解决安全问题的方法实例
2019/09/19 PHP
js left,right,mid函数
2008/06/10 Javascript
json 定义
2008/06/10 Javascript
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
vue获取dom元素注意事项
2017/12/28 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
element中的$confirm的使用
2020/04/26 Javascript
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
Linux开机引导的步骤是什么
2015/10/19 面试题
优秀毕业生事迹材料
2014/02/12 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
网站创业计划书
2014/04/30 职场文书
环保倡议书500字
2014/05/15 职场文书
机关作风整顿个人整改措施思想汇报
2014/09/29 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书