zoukankan      html  css  js  c++  java
  • 通过js读取元素的样式

    /*
    * 通过元素.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]
                        }
  • 相关阅读:
    多线程编程学习笔记——任务并行库(三)
    多线程编程学习笔记——任务并行库(二)
    多线程编程学习笔记——任务并行库(一)
    多线程编程学习笔记——线程池(三)
    多线程编程学习笔记——线程池(二)
    多线程编程学习笔记——线程池(一)
    多线程编程学习笔记——线程同步(三)
    多线程编程学习笔记——线程同步(二)
    多线程编程学习笔记——线程同步(一)
    多线程编程学习笔记-基础(三)
  • 原文地址:https://www.cnblogs.com/caicaihong/p/9341457.html
Copyright © 2011-2022 走看看