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 相关文章推荐
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
浅析javascript中的DOM
Mar 01 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
详解Angualr 组件间通信
Jan 21 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
ant design实现圈选功能
Dec 17 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
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
微信小程序自定义prompt组件步骤详解
2018/06/12 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
小程序关于请求同步的总结
2019/05/05 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
python 获取et和excel的版本号
2009/04/09 Python
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
Python2.x与Python3.x的区别
2016/01/14 Python
Python使用django搭建web开发环境
2017/06/09 Python
详解python中的文件与目录操作
2017/07/11 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
Python底层封装实现方法详解
2020/01/22 Python
使用Pycharm分段执行代码
2020/04/15 Python
幼儿教师自我鉴定
2013/11/02 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
收银出纳员岗位职责
2014/02/23 职场文书
《识字五》教学反思
2014/03/01 职场文书
农村党员对照检查材料
2014/09/24 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
人口与计划生育责任书
2015/05/09 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
Python 数据可视化之Bokeh详解
2021/11/02 Python
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang
Golang gRPC HTTP协议转换示例
2022/06/16 Golang