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 相关文章推荐
javascript 广告后加载,加载完页面再加载广告
Nov 25 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
JavaScript中的函数模式详解
Feb 11 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
Angular表单验证实例详解
Oct 20 Javascript
js实现导航吸顶效果
Feb 24 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
php笔记之:AOP的应用
2013/04/24 PHP
保存到桌面、设为桌面且带图标的PHP代码
2013/11/19 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
Angularjs 基础入门
2014/12/26 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
js实现分页功能
2017/05/24 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
python设置windows桌面壁纸的实现代码
2013/01/28 Python
windows下python安装小白入门教程
2018/09/18 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
Python GUI编程完整示例
2019/04/04 Python
pyqt5让图片自适应QLabel大小上以及移除已显示的图片方法
2019/06/21 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
python logging设置level失败的解决方法
2020/02/19 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
某公司部分笔试题
2013/11/05 面试题
Weblogic和WebSphere不同特点
2012/05/09 面试题
学校办公室主任职责
2013/12/27 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
js Proxy的原理详解
2021/05/25 Javascript
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL