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 animate图片模向滑动示例代码
Jan 26 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 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
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
React中上传图片到七牛的示例代码
2017/10/10 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
Python实现的tab文件操作类分享
2014/11/20 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
python各类经纬度转换的实例代码
2019/08/08 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
python实现图像全景拼接
2020/03/27 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
4s店市场专员岗位职责
2014/04/09 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
借款担保书范文
2014/05/13 职场文书
房地产开发项目建议书
2014/05/16 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
药店营业员岗位职责
2015/04/14 职场文书
热血教师观后感
2015/06/10 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
导游词之山海关
2019/12/10 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server