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 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
JS拖拽组件学习使用
Jan 19 Javascript
原JS实现banner图的常用功能
Jun 12 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 Javascript
javascript实现商品图片放大镜
Nov 28 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 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的FTP学习(一)
2006/10/09 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
python批量修改文件名的实现代码
2014/09/01 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
python实现八大排序算法(2)
2017/09/14 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
python实现简单的购物程序代码实例
2020/03/03 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
入学生会自荐书范文
2014/02/05 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
五一劳动节慰问信
2015/02/14 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
2016年党建工作简报
2015/11/26 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
JS实现扫雷项目总结
2021/05/19 Javascript