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 相关文章推荐
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
jquery实现的图片点击滚动效果
Apr 29 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
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
PHP5/ZendEngine2的改进
2006/10/09 PHP
PHP 变量类型的强制转换
2009/10/23 PHP
php筛选不存在的图片资源
2015/04/28 PHP
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
django fernet fields字段加密实践详解
2019/08/12 Python
flask 实现token机制的示例代码
2019/11/07 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
什么是继承
2013/12/07 面试题
大四学生思想汇报
2014/01/13 职场文书
招聘单位介绍信
2014/01/14 职场文书
搞笑创意广告语
2014/03/17 职场文书
我的小天地教学反思
2014/04/30 职场文书
我爱我校演讲稿
2014/05/21 职场文书
宣传标语大全
2014/07/01 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python