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创建自己的插件(自定义插件)的方法
Jun 10 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
23个Javascript弹出窗口特效整理
Feb 25 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
深入理解Javascript中的循环优化
Nov 09 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
JS之相等操作符详解
Sep 13 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
微信小程序实现多张图片上传功能
Nov 18 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读MYSQL中文乱码的解决方法
2006/12/17 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
jQuery技巧总结
2011/01/01 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
Tensorflow环境搭建的方法步骤
2018/02/07 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
python如何通过twisted搭建socket服务
2020/02/03 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
合同专员岗位职责
2013/12/18 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
自荐书范文范例
2014/02/13 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
工程质量承诺书
2014/03/27 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
实习生评语
2014/04/26 职场文书
企业公益活动策划方案
2014/08/24 职场文书
狂人日记读书笔记
2015/06/30 职场文书
公司规章制度范本
2015/08/03 职场文书
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技