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封装的不错的选项卡效果代码
Feb 15 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
js、css、img等浏览器缓存问题的2种解决方案
Oct 23 Javascript
javascript折半查找详解
Jan 26 Javascript
JS去除iframe滚动条的方法
Apr 01 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
vue实现购物车案例
May 30 Javascript
Vue实现小购物车功能
Dec 21 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
提问的智慧(2)
2006/10/09 PHP
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
php浏览历史记录的方法
2015/03/10 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
2009/07/30 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
Three.js基础部分学习
2017/01/08 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
详解vue路由
2020/08/05 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
python paramiko模块学习分享
2017/08/23 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
python 获取url中的参数列表实例
2018/12/18 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
KIKO MILANO西班牙官网:意大利领先的化妆品和护肤品品牌
2019/05/03 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
采购人员的个人自我评价
2014/01/16 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
会计专业求职信范文
2015/03/19 职场文书
吧主申请感言怎么写
2015/08/03 职场文书