js获取元素外链样式的方法


Posted in Javascript onJanuary 27, 2015

本文实例讲述了js获取元素外链样式的方法。分享给大家供大家参考。具体分析如下:

一般给元素设置行内样式,如<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="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>也要点击我~O(∩_∩)O~。</p>
</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
Javascript的表单验证长度
Mar 16 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 Javascript
JS原生实现轮播图的几种方法
Mar 23 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 #Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 #Javascript
javascript将异步校验表单改写为同步表单
Jan 27 #Javascript
JavaScript中实现sprintf、printf函数
Jan 27 #Javascript
javascript批量修改文件编码格式的方法
Jan 27 #Javascript
JavaScript中的包装对象介绍
Jan 27 #Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
Jan 26 #Javascript
You might like
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
php编程每天必学之表单验证
2016/03/01 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
基于jquery的表格排序
2010/09/11 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
python3简单实现微信爬虫
2015/04/09 Python
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
保险公司年会主持词
2014/03/22 职场文书
新课培训心得体会
2014/09/03 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
庆七一晚会主持词
2015/06/30 职场文书
卖车协议书范文
2016/03/23 职场文书