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="http://keleyi.com/keleyi/pmedia/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>也要点击我哦。</p>
<div><a href="http://keleyi.com">首页</a> <a href="http://keleyi.com/keleyi/phtml/">特效库</a> <a href="http://keleyi.com/a/bjae/nb9lb3sd.htm">原文</a></div>
</body>
</html>
本文转载自柯乐义http://keleyi.com/a/bjae/nb9lb3sd.htm
js获取元素的外链样式的更多相关文章
- JS获取元素计算过后的样式
获取元素计算过后的样式 Window.getComputedStyle() 方法会在一个元素应用完有效样式且计算完所有属性的基本值之后给出所有 CSS 属性的值. 语法: let style = wi ...
- JavaScript获取css 行间样式,内连样式和外链样式的方式
[行间样式获取] <div id='div1' style="backgroud:red">测试</div> <script> var odiv ...
- Js获取元素样式值(getComputedStyle¤tStyle)兼容性解决方案
因为:style(document.getElementById(id).style.XXX)只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. 一般js获取内部样式和外部样式使用 ...
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- 原生js获取元素非行内样式属性的方法
获取当前对象的样式DOM标准中的全局方法 getComputedStyle(obj).width (获取元素的宽度),但在非标准IE浏览器(IE8)以下有兼容问题IE8以下要这样写 obj.curre ...
- 【全面总结】js获取元素位置大小
[js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...
- js获取元素位置和style的兼容性写法
今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...
- JS获取元素属性
<style> *{ box-sizing: border-box; } html, body { margin: 0px; width: 100%; height: 100%; over ...
- JS获取元素宽高的两种情况
JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用 document.getElementById('xxx'). ...
随机推荐
- Linux 设置 LD_LIBRARY_PATH
在Linux下,如果自己写好一个动态链接库,需要在其他程序里调用,则需要让这些程序能找到这个动态链接库,如果设置的不对,就会出现类似的错误: error : cannot open shared ob ...
- thinkphp 连接mssql 当local失效时
<?php return array( //'配置项'=>'配置值' //'USERNAME'=>'admin', //赋值 //数据库配置信息 'DB_TYPE' => 'm ...
- SEO之基于thinkphp的URL伪静态
最近基于thinkphp开发了个导购网站,现在有时间,将遇到的伪静态问题整理下,与大家分享.1.设置URL伪静态在config.ini.php中设置,如果只想前台URL伪静态,那么只在前台的confi ...
- 关于Cocos2d-x节点和精灵节点的坐标、位置以及大小的设置
1.cocos2d-X中的坐标(0,0),就是运行框的左下角位置,所以运行框看起来就是一个第一象限. 2.节点的锚点就是我们setPosition所设定的位置,默认锚点是在节点的中心,也就是setPo ...
- 什么是事务(transaction)?它有什么好处
为了完成对数据的操作,企业应用经常要求并发访问在多个构件之间共享的数据.这些应用在下列条件下应该维护数据的完整性(由应用的商务规则来定义): 分布式访问一个单独的数据资源,以及从一个单独的应用构件访问 ...
- 标识符的长度应当符合“min-length && max-information”原则
标识符的长度应当符合“min-length && max-information”原则. 几十年前老 ANSI C 规定名字不准超过 6 个字符,现今的 C++/C 不再有此限制.一 ...
- 蔡勒(Zeller)公式
来源好搜百科:http://baike.haosou.com/doc/1048888-1109421.html 蔡勒(Zeller)公式,是一个计算星期的公式,随便给一个日期,就能用这个公式推算出是星 ...
- Windows 上 GitHub Desktop 的操作[转]
第1章 上传开源代码至GitHub 1 1.1 git Windows 客户端 1 1.2 注册GitHub账户 2 1.3 登录 2 1.4 创建本地代码仓库 2 1. ...
- PHP+tcpdf的生成
项目中,可能用到额 查看:http://www.sucaihuo.com/php/217.html
- SQL中查询语句的使用
常用SQL查询语句 - myLittleGarden - 博客园 http://www.cnblogs.com/sunada2005/p/3411873.html 一.简单查询语句 1. 查看表结构 ...