/*
* 通过元素.style.样式只能获取到内联样式的值,就是style写在元素里面的值,不能获取嵌入式和外联样式的值
* 所以如果要获取除内联样式后的值,就不能通过这个获取
* alert(box1.style.height)
* 还有其他的形式,比如获取元素当前显示的样式,就是不管是外联还是嵌入式还是内联,谁显示就是获取谁的样式
* 语法:元素.currentStyle.样式名
* 他可以读取当前元素正在显示的样式
* alert(box1.currentStyle.width);
* 这个只有IE支持,其他浏览器都不支持。
* 在其他浏览器中可以使用getComputedStyle()这个方法来获取当前元素的样式
* 这个是window的方法,可以直接使用
* 语法:
* 需要两个参数:
* 第一个:要获取样式的元素
* 第二个:可以传递一个伪元素,一般都传null。
* 该方法会返回一个对象,对象中封装了当前元素对应的样式
* 可以通过对象.样式名来读取样式
* 如果获取的样式没有设置,则会获取到真实的值,而不是默认值
* 比如没有设置width,他不会获得auto,而是一个实际上的值。
* 而IE的话,不设置会默认auto
* 但是该方法不支持IE8及以下浏览器
* 如果为了兼容两个,那么就定义一个函数来兼容两个都可以,就是类似弄一个判断包含在里面
*

* 通过currentStyle和getComputedStyle()读取到的样式都是只读的
* 不能修改,如果要修改必须通过style属性。
*/

            function getStyle(obj,name){
//获取属性可以通过.,也可以通过中括号,这里.不适合,中括号才适合
//正常浏览器的方式,具有getComputedStyle方法
getComputedStyle(obj,null)[name]
//要加window,否则是个变量,到时候会报错
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name] }else{
//IE浏览器,具有currentStyle方法
return obj.currentStyle[name]
}
//第二种方式可以通过三元运算符
window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name]
}

通过js读取元素的样式的更多相关文章

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

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

  2. js实现元素添加样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js给元素添加样式[addClass][hasClass]

    function addClass(el, className) { if (hasClass(el, className)) { return } let newClass = el.classNa ...

  4. js兼容获取元素的样式

    js获取元素的样式的兼容性处理: function getStyle(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComp ...

  5. 用JS改变的元素CSS样式,css里display :none 隐藏 block 显示

    CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式:方法一:document.divs.style. ...

  6. 通过JS动态的修改HTML元素的样式和增添标签元素等

    一. 通过JS动态的修改HTML元素的样式   1. 要想在js中动态的修改HTML元素的样式,首先需要写document,    document我们称之为文档对象,这个对象中保存了当前网页中所有的 ...

  7. 原生js获取元素样式

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

  8. js获取元素的外链样式

    一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可d ...

  9. (知识点)JS中获取元素的样式

    首先我们已经知道了JavaScript如果获取一个元素的内部样式,你可以这样做: <div id="box" style="width:100px;height:1 ...

随机推荐

  1. Home Assistant系列 -- 设置界面语言与地理位置

    Home Assistant 安装的时候会自动根据你的系统语言设置默认语言,安装完成以后也可以根据需要自己设置选择语言.启动 Home Assistant ,浏览器打开web 界面,点击左上角的用户图 ...

  2. Linux IO多路复用 select

    Linux IO多路复用 select 之前曾经写过简单的服务器,服务器是用多线程阻塞,客户端每一帧是用非阻塞实现的 后来发现select可以用来多路IO复用,就是说可以把服务器这么多线程放在一个线程 ...

  3. HyperLedger Fabric 1.4 区块链工作过程(2.3)

    区块链的工作过程分交易产生.交易广播.节点计算.获取记账权.记账权广播.接收区块.验证区块和完成记账七个过程. 1) 交易产生:用户向区块链发了一笔交易信息,将产生交易:2) 交易广播:当一笔新交易产 ...

  4. python -keras

    Numpy 1. np. shape np.reshape np.prod() astype() dtype() From keras.layers import Input Input():用来实例 ...

  5. OpenFlow1.3.3 学习记录(持续更新)

    OpenFlow1.3.3 学习记录(持续更新) 正在学习OpenFlow1.3,该篇笔记将日常更新,主要内容大致为官方文档的总结与翻译. 交换机组件 按照优先级顺序进行包匹配,如果匹配到流表项,则执 ...

  6. 20155207实验2 Windows口令破解

    20155207实验2 Windows口令破解 实验目的 了解Windows口令破解原理 对信息安全有直观感性认识 能够运用工具实现口令破解 实验原理 口令破解方法 口令破解主要有两种方法:字典破解和 ...

  7. 20155207 2016-2017-2《Java程序设计》课程总结

    20155207 2016-2017-2<Java程序设计>课程总结 每周作业链接汇总: 预备作业一:一路风景---我期待的是师生关系 预备作业二:学习情况的相关调查 预备作业三:安装虚拟 ...

  8. 20155217 2016-2017-2 《Java程序设计》第3周学习总结

    20155217 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 第四章 要产生对象必须先定义类,类定义时使用class关键词,建立实例要使用new关键词. ...

  9. NetWork——TCP的流量控制和拥塞控制

    ,然后开始执行拥塞避免算法,使拥塞窗口缓慢地线性增大. 这里为什么替换掉了慢开始算法呢,这是因为收到重复的ACK不仅仅告诉我们一个分组丢失了,由于接收方只有在收到另一个报文段时才会产生重复的ACK,所 ...

  10. jsp+servlet+javabean开发web项目

    一.介绍: 项目依赖包:jdbc数据库包 jsp+servlet+javabean开发web项目,是最接近web项目原生运行原理的. 但是,jsp内容混乱,项目结构复杂时,代码会混乱 二.运行原理: ...