获取当前对象的样式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获取元素非行内样式属性的方法的更多相关文章

  1. 原生js获取元素的样式信息

    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...

  2. 原生JS获取元素宽高实践详解

    开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...

  3. 关于原生JS获取class，ID等属性的一些封装

    一.传统上获取是通过document.getElementById获取元素的ID属性,通过总结与学习总结一下获取元素class以及id属性的一些封装; 1.创建构造函数,这里面不需要多解释什么:(主要 ...

  4. 通过js获取元素css3的transform rotate旋转角度方法

    我们再试用jquery获取样式的时候是通过$('domName').css('transform'):的方式来获取元素的css样式,但是通过它获取到的css3的transform属性是以矩阵的方式呈现 ...

  5. 原生js获取元素样式

    摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...

  6. 原生js获取元素style属性

    function getStyle(ele,attr){ if( ele.currentStyle ){ return ele.currentStyle[attr]; // ie } else { r ...

  7. 原生JS获取元素集合的子元素宽度

    有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. ...

  8. 原生js获取元素的子元素

    //使用firstChild //但是下面这种因为有空格,也算其子元素 <lable> <span id="onlinePerson" name="pe ...

  9. 原生js获取元素的各种位置(大全）

    加给元素: offsetLeft (距离定位父级的距离) offsetTop (距离定位父级的距离) offsetWidth (可视宽度) offsetHeight (可视高度) clientLeft ...

随机推荐

  1. Ubuntu环境下配置darknet

    本教程基于Linux物理机进行相关配置,要求物理机中包含N卡且Capbility>=3.0,小于3.0(Fermi架构)只允许配置cuda,不能配置使用Cudnn: 本教程分为: 1.安装NVI ...

  2. ava怎样将"1413863429"字符串转换成datetime格式

    .....一般来说应该是一个 毫秒数 String str ="1413863429"; Long timeLong = Long.parseLong(str); SimpleDa ...

  3. 香港,将军澳,TKO,服务器,运维,机房,云清洗

    目前香港到大陆速度最快.最稳定线路之一. 线路也是唯一华南华北一样快速的线路,是100%的“双线”,不存在其他香港线路网通访问比电信慢的问题. (香港)将军澳TKO机房网络速度快捷,机房内部环境配有意 ...

  4. JavaScript 异步编程的前世今生（上）

    前言 提到 JavaScript 异步编程,很多小伙伴都很迷茫,本人花费大约一周的业余时间来对 JS 异步做一个完整的总结,和各位同学共勉共进步! 目录 part1 基础部分 什么是异步 part2 ...

  5. 【安富莱专题教程第4期】SEGGER的J-Scope波形上位机软件，HSS模式简单易用，无需额外资源，也不需要写目标板代码

    说明:1.在实际项目中,很多时候,我们需要将传感器或者ADC的数值以波形的形式显示.通常的解决办法是用串口上位机,USB接口上位机或者MDK的逻辑分析仪功能,使用这三种方式都比较繁琐.本期专题为大家讲 ...

  6. 基于Java的ArrayList和LinkedList的实现与总结

    一.定义MyList接口,包含列表常见方法: import java.util.Iterator; /** * 线性表(列表)的接口定义 */ public interface MyList<T ...

  7. &和&&的共同点和区别、Java字符含义和Java创建对象的几种方式

    一.&和&&的共同点和区别 1.&和&&的联系(共同点): &和&&都可以用作逻辑与运算符,但是要看使用时的具体条件来决定. 操 ...

  8. [Java]LeetCode133. 克隆图 | Clone Graph

    Clone an undirected graph. Each node in the graph contains a label and a list of its neighbors. OJ's ...

  9. CentOS 7 安装 JAVA环境（JDK 1.8）

    1.打开url选择jdk1.8下载 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.htm ...

  10. CardView卡片式布局

    CardView适用于实现卡片式布局效果的重要控件,由appcompat-v7库提供,实际上CardView也是一个FrameLayout,只是额外提供了圆角和阴影效果,看上去有立体的感觉.一般Car ...