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 相关文章推荐
动态加载iframe
Jun 16 Javascript
一个可以随意添加多个序列的tag函数
Jul 21 Javascript
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
微信小程序实现点击生成随机验证码
Sep 09 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
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 sprintf()函数让你的sql操作更安全
2008/07/23 PHP
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
JavaScript中this关键字用法实例分析
2018/08/24 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
详谈vue中router-link和传统a链接的区别
2020/07/22 Javascript
Python中规范定义命名空间的一些建议
2016/06/04 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
师范生个人推荐信
2013/11/29 职场文书
座谈会主持词
2014/03/20 职场文书
协议书模板
2014/04/23 职场文书
车辆转让协议书
2014/09/24 职场文书
工地材料员岗位职责
2015/04/11 职场文书