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 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
Jquery 基础学习笔记
May 29 Javascript
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
JS实现商品筛选功能
Aug 19 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 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
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
php 在文件指定行插入数据的代码
2010/05/08 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
PHP微信开发之查询城市天气
2016/06/23 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
用 python 进行微信好友信息分析
2020/11/28 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
番木瓜健康和保健产品第一大制造商:Herbal Papaya
2017/04/25 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
文明教师事迹材料
2014/01/16 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
图书室标语
2014/06/21 职场文书
刑事和解协议书范本
2014/11/19 职场文书
赵氏孤儿观后感
2015/06/09 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
方法汇总:Python 安装第三方库常用
2022/04/26 Python