获取当前对象的样式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. python—文件处理

    一.文件处理流程 1.打开文件,得到文件句柄并赋值 2.通过句柄对文件进行操作 3.关闭文件 二.文件打开模式 1.r,只读,默认模式 2.w,只写 3.a,追加 4. r+.w+.x+.a+ ,可读 ...

  2. Signed Distance Field Shadow in Unity

    0x00 前言 最近读到了一个今年GDC上很棒的分享,是Sebastian Aaltonen带来的利用Ray-tracing实现一些有趣的效果的分享. 其中有一段他介绍到了对Signed Distan ...

  3. 记录k8s:k8s1.8.4无坑离线安装

    安装部署: 1. 使用vagrant 准备3太虚拟机,自己使用Vbox 准备3太也可以. 2. 按照 https://github.com/gjmzj/kubeasz 安装. 3. 使用letsenc ...

  4. zepto与jquery冲突的解决

    一般是不会把zepto和jquery一起来用的.但有时候要引入一些插件,可能就会遇到这样的问题. jquery noConflict() jquery有一个方法叫noConflict() ,可以把jq ...

  5. 【RL-TCPnet网络教程】第31章 Telnet远程登录基础知识

    第31章      Telnet远程登录基础知识 本章节为大家讲解Telnet (Teletype Network) 的基础知识,方便后面章节的实战操作. (本章的知识点主要整理自网络) 31.1   ...

  6. YOU种你来丨i春秋校园行第一站北京电子科技学院

    发通告啦 i春秋互联网安全校园行即将火爆开启,第一站我们将来到北京电子科技学院.对网络安全感兴趣的大学生们注意啦,我们将走进校园送福利,Are you ready? i春秋简介 i春秋拥有全国最大的网 ...

  7. MYSQL手册

    原文出处:http://www.cnblogs.com/gaofei-1/p/7152875.html MySQL配置文件 MySQL软件使用的配置文件名为my.ini,在安装目录下. MySQL常用 ...

  8. [Swift]LeetCode870. 优势洗牌 | Advantage Shuffle

    Given two arrays A and B of equal size, the advantage of A with respect to B is the number of indice ...

  9. 洛谷P2089烤鸡

    题目链接:https://www.luogu.org/problemnew/show/P2089 题目详情: 题目背景 猪猪hanke得到了一只鸡 题目描述 猪猪Hanke特别喜欢吃烤鸡(本是同畜牲, ...

  10. mysql如何卸载完全

    如何彻底的删除MySQL数据库: 以下操作以Window7操作系统为例: 1)停止window的MySQL服务. 找到“控制面板”-> “管理工具”-> “服务”,停止MySQL后台服务. ...