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 相关文章推荐
jQuery替换字符串(实例代码)
Nov 13 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
使用javascript做在线算法编程
May 25 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
Javascript生成器(Generator)的介绍与使用
Jan 31 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
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
jQuery动态添加、删除元素的方法
2014/01/09 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
Python  连接字符串(join %)
2008/09/06 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
python用插值法绘制平滑曲线
2021/02/19 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
GWT都有什么特性
2016/12/02 面试题
建筑专业自荐信范文
2014/01/05 职场文书
开会迟到检讨书
2014/01/08 职场文书
大学生冰淇淋店商业计划书
2014/01/14 职场文书
庆八一活动方案
2014/01/25 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
微信搭讪开场白
2015/05/28 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
关于python中模块和重载的问题
2021/11/02 Python
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js