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 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 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实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
javascript 学习之旅 (1)
2009/02/05 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
python文件名和文件路径操作实例
2017/09/29 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
django富文本编辑器的实现示例
2019/04/10 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
python中常见错误及解决方法
2020/06/21 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
餐饮主管岗位职责
2013/12/10 职场文书
亲子拓展活动方案
2014/02/20 职场文书
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python