• 浏览器版本和类型来处理兼容


    //1.行业样式获取方式(不常用)
    box.style.width
    2.window.getComputedStyle(1,2)
    2->当前元素的伪类 IE6,7,8不兼容 只读
    currentStyle返回的是元素当前应用的最终CSS属性值(包括外链CSS文件,页面中嵌入的<style>属性等)。currentStyle属性貌似不支持伪类样式获取
    getComputedStyle
    getPropertyValue方法可以获取CSS样式申明对象上的属性值(直接属性名称),例如
    window.getComputedStyle(element, null).getPropertyValue("float");
    如果我们不使用getPropertyValue方法,直接使用键值访问,其实也是可以的。但是,比如这里的的float,如果使用键值访问,则不能直接使用getComputedStyle(element, null).float,而应该是cssFloat与styleFloat,自然需要浏览器判断了

    这个方法是获取所有经过浏览器计算过的样式,经过浏览器渲染过的样式
    CSSStyleDeclaration:包含了当前元素所有的样式属性和值*/
    console.log(box.style.width);
    console.log(window.getComputedStyle(box,null));
    console.log(window.getComputedStyle(box,null)["height"]);
    //try catch 必须保证try中的代码在不兼容浏览器中执行的时候报错:
    //比较消耗性能
    function getCss(curEle,attr){
    var val=null;
    //111 try {
    // val=window.getComputedStyle(curEle,null)[attr];
    // } catch(e) {
    // val=curEle.currentStyle[attr];
    // }
    if("getComputedStyle" in window){//window.getComputedStyle
    val=window.getComputedStyle(curEle,null)[attr];
    }else{
    val=curEle.currentStyle[attr];
    }
    return val;

    }
    //3.通过检测浏览器版本和类型来处理兼容
    console.log(window.navigator.userAgent);

  • 相关阅读:
    vue 输入框数字、中文验证
    微信小程序 画布arc截取圆形图片
    change事件同一文件多次选中
    form表单提交
    微信小程序 拖动图片一边进行截取
    初步了解XMLHttpRequest对象、http请求的封装
    encodeURI和uncodeURIComponent的介绍
    vue-cli 3.0安装和使用
    MySQL学习中,遇到的问题记录
    react学习之redux和redux-react用法
  • 原文地址:https://www.cnblogs.com/qiqi105/p/8303073.html
Copyright © 2020-2023  润新知