原生js获取元素非行内样式属性的方法
获取当前对象的样式DOM标准中的全局方法 getComputedStyle(obj).width （获取元素的宽度）,但在非标准IE浏览器（IE8）以下有兼容问题
IE8以下要这样写 obj.currentStyle.width 这样的话在IE8以下正常显示，但标准浏览器下又会报错，所以一要判断一下
//getStyle()函数，获取元素的非行内样式
//使用方法 getStyle(元素,"属性名") 如：getStyle(oBox,"background")
function getStyle(obj,attr) {
if(window.getComputedStyle){//浏览器如果支持getComputedStyle()方法
return getComputedStyle(obj)[attr];
}else{
return obj.currentStyle[attr];
}
}
obj.style.width只能获取行内元素样式
<head>
<style>
.block{
width: 100px;
height: 100px;
}
</style>
</head> <body>
<div class="block" style="background:blueviolet;"></div>
<script>
var block = document.getElementsByClassName("block")[0];
console.log(block.style.width);//什么都不输出
console.log(block.style.background);//blueviolet
</script>
</body>
</html>
原生js获取元素非行内样式属性的方法的更多相关文章
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- 原生JS获取元素宽高实践详解
开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...
- 关于原生JS获取class，ID等属性的一些封装
一.传统上获取是通过document.getElementById获取元素的ID属性,通过总结与学习总结一下获取元素class以及id属性的一些封装; 1.创建构造函数,这里面不需要多解释什么:(主要 ...
- 通过js获取元素css3的transform rotate旋转角度方法
我们再试用jquery获取样式的时候是通过$('domName').css('transform'):的方式来获取元素的css样式,但是通过它获取到的css3的transform属性是以矩阵的方式呈现 ...
- 原生js获取元素样式
摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...
- 原生js获取元素style属性
function getStyle(ele,attr){ if( ele.currentStyle ){ return ele.currentStyle[attr]; // ie } else { r ...
- 原生JS获取元素集合的子元素宽度
有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. ...
- 原生js获取元素的子元素
//使用firstChild //但是下面这种因为有空格,也算其子元素 <lable> <span id="onlinePerson" name="pe ...
- 原生js获取元素的各种位置(大全）
加给元素: offsetLeft (距离定位父级的距离) offsetTop (距离定位父级的距离) offsetWidth (可视宽度) offsetHeight (可视高度) clientLeft ...
随机推荐
- ES6新增对象方法的访问描述符：get(只读)、set(只写)
Es6新增对象方法的访问描述符:get(只读).set(只写),可以直接使用,一般用于数据监听,用途类似于vue.$watch. var obj = { a:1, get bar() { return ...
- Java作业六（2017-10-30）
/*游戏引擎包,播放音乐*/ import com.rupeng.game.GameCore; public class Mc implements Runnable{ public static v ...
- tag cloud的相关资料
http://reverland.org/python/2013/01/28/visualize-your-shell-history/ https://github.com/reverland/sc ...
- 大数据BI框架知识点备注
将这段时间的一些基于大数据方案的BI知识点暂时做些规整,可能还存在较多问题,后续逐步完善修改. 数据模型: 1.星型模型和雪花模型,同样是将业务表拆分成事实表和纬度表:例如一个员工数据表,可以拆分为员 ...
- 在React Native中,使用fetch网络请求 实现get 和 post
//在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...
- 在Windows、Mac和 Linux系统中安装Python与 PyCharm
“工欲善其事,必先利其器”,本文介绍 Python环境的安装和 Python的集成开发环境(IDE) PyCharn的安装. 一.Python安装( Windows.Mac和 Linux) 当前主 ...
- Javascript高级编程学习笔记（90）—— Canvas(7) 绘制图像
绘制图像 2D绘图上下文内置了对图像的支持 如果希望将一幅图绘制到画布上,可以使用 drawImage() 的方法 该方法有三种不同的参数数组合以对应不同的应用场景 将<img>绘制到画布 ...
- Spring Data Jpa接口简介
Repository接口 public interface Repository<T, ID> {....} 提供了按方法名称的查询方式: 提供了@Query的查询方式 可能遇到的错误: ...
- Linux清空文件内容
日志文件太多,需要清空: echo "" > mylog.log
- PHP 扩展管理
一直对 PHP 扩展了解的似是而非,每次安装扩展都要百度教程,很容易出现各种错误.所幸整理下管理扩展的所有操作,方便日后操作. 查看已加载的扩展 输出 phpinfo(): 使用 get_loaded ...