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 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
js正确获取元素样式详解
Aug 07 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
微信小程序开发探究
Dec 27 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
May 13 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 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强制下载类型的实现代码
2011/04/21 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
js实现数组冒泡排序、快速排序原理
2016/03/08 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
OpenLayers3实现图层控件功能
2020/09/25 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
python实现的jpg格式图片修复代码
2015/04/21 Python
python实现动态数组的示例代码
2019/07/15 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
上班上网检讨书
2014/01/29 职场文书
行政人事岗位职责
2014/03/17 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
七年级语文教学反思
2016/03/03 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书