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 国际象棋棋盘 实现代码
Jun 26 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
JS触摸与手势事件详解
May 09 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
详解js中的原型,原型对象,原型链
Jul 16 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 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 array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
JS模仿手机端九宫格登录功能实现代码
2016/04/28 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
Python递归函数实例讲解
2019/02/27 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
vue路由实现登录拦截
2021/03/24 Vue.js
个人委托书怎么写
2014/04/04 职场文书
学校运动会开幕词
2016/03/03 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle