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 相关文章推荐
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
javascript new fun的执行过程
Aug 05 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
简单实现js上传文件功能
Aug 21 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
JavaScript中的Proxy对象
Nov 27 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
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
php常用表单验证类用法实例
2015/06/18 PHP
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
vue写一个组件
2018/04/09 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
Python编写简单的HTML页面合并脚本
2016/07/11 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
Pandas的数据过滤实现
2021/01/15 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
市场营销专业个人自荐信格式
2013/09/21 职场文书
质量工程师岗位职责
2013/11/16 职场文书
大学自我评价
2014/02/12 职场文书
三八妇女节致辞
2015/07/31 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS