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 相关文章推荐
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
vue 更改连接后台的api示例
Nov 11 Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 Javascript
详解Vue3使用axios的配置教程
Apr 29 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
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
PHP JSON 数据解析代码
2010/05/26 PHP
PHP访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
js 单引号 传递方法
2009/06/22 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
对Python中画图时候的线类型详解
2019/07/07 Python
Python循环实现n的全排列功能
2019/09/16 Python
html5读取本地文件示例代码
2014/04/22 HTML / CSS
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
优秀本科生求职推荐信
2014/02/24 职场文书
感恩寄语大全
2014/04/11 职场文书
目标管理责任书
2014/04/15 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
使用Python解决图表与画布的间距问题
2022/04/11 Python
Nginx反向代理、重定向
2022/04/13 Servers