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实现代码
Oct 01 Javascript
js处理表格对table进行修饰
May 26 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
JS实现队列与堆栈的方法
Apr 21 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
webpack打包js的方法
Mar 12 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
vue 开发之路由配置方法详解
Dec 02 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实时显示输出
2008/10/02 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
flexigrid 参数说明
2010/11/23 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
详解Python爬虫的基本写法
2016/01/08 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
谈谈python中GUI的选择
2018/03/01 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
python实现从ftp服务器下载文件
2020/03/03 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
英国网上购买门:Direct Doors
2018/06/07 全球购物
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
大一学生假期实习的自我评价
2013/10/12 职场文书
社区活动邀请函范文
2014/01/29 职场文书
广告学专业求职信
2014/06/19 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
三年级学生期末评语
2014/12/26 职场文书
交通事故调解协议书
2015/05/20 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
Python基础之元组与文件知识总结
2021/05/19 Python
JavaScript 对象创建的3种方法
2021/11/17 Javascript