/**
*浏览器兼容写法封装
*/
let elementStyle = document.createElement('div').style let vendor = (() => {
let transformNames = {
webkit: 'webkitTransform',
Moz: 'MozTransform',
O: 'OTransform',
ms: 'msTransform',
standard: 'transform'
} for (let key in transformNames) {
if (elementStyle[transformNames[key]] !== undefined) {
return key
}
} return false
})() export function prefixStyle(style) {
if (vendor === false) {
return false
} if (vendor === 'standard') {
return style
} return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}

//调用

const transform = prefixStyle('transform')
const backdrop = prefixStyle('backdrop-filter')

div.style[transform] = `translate3d(0,0,0)` 等同于  div.style['transform'] = `translate3d(0,0,0)`

div.style[backdrop] = `blur(4px)`等同于  div.style['backdrop'] = `blur(4px)`

js 浏览器兼容css中webkit、Moz、O、ms...写法封装(es6语法)的更多相关文章

  1. 浏览器兼容css

    原文:https://www.cnblogs.com/shizk/p/8459362.html 1.为什么会出现浏览器兼容问题? 由于各大主流浏览器由不同的厂家开发,所用的核心架构和代码也很难重和,这 ...

  2. JS浏览器兼容问题

    一.JS与DOM的兼容性: (一) DOM节点的访问: 1.以前对DOM节点访问一般用“document.All.元素ID属性值”或者“document.元素ID属性值”这种简化的方法,在FireFo ...

  3. js 浏览器兼容的一些方法

    使用js是一件令人很抓狂的事情,很多的浏览器兼容,一大推的代码,谁的脑袋能记住那么多的东西,只有平时多积累,所谓熟能生巧嘛..这里列出一些常用的兼容代码,一点点积累哈~~~     一.以跨浏览器的方 ...

  4. hack (浏览器兼容css hack)

    1.hack的原理 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS. CSS Hack大致有3种表现形式,CSS类内 ...

  5. js浏览器兼容

    //window.event   IE:有window.event对象   FF:没有window.event对象.可以通过给函数的参数传递event对象.如onmousemove=doMouseMo ...

  6. js 浏览器兼容问题及解决办法

    JS中出现的兼容性问题的总结 1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题  我们都知道js通过style不可以获取行外样式,当我们需要获取行 ...

  7. 浏览器兼容CSS渐进增强 VS 优雅降级如何选择

    由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能.二者的目的都是关注不同浏览器下的不同体验,但是它们侧重点不同,所以 ...

  8. 浏览器兼容CSS代码:按钮文字垂直居中(input button text vertical align)

    经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...

  9. IE浏览器兼容 css之bug 问题

    bug的几种常见原因: 1.盒模型bug      原因:没有正确声明doctype(如果没有声明doctype,各浏览器对代码的解析有不同的规范).解决方法:使用严格的doctype声明. 2.各浏 ...

随机推荐

  1. 吐槽CodeDom

    用着.NET Framework,发现了CodeDom的先天性缺陷,心里百般难受. 不知道 CodeDom 是什么的请看这里 CodeDom_百度百科 这里有CodeDom非常全的中文教程 CodeD ...

  2. 每天一个linux命令(47):iostat命令

    Linux系统​中的 iostat是I/O statistics(输入/输出统计)的缩写,iostat工具将对系统的磁盘操作活动进行监视.它的特点是汇报磁盘活动统计情况,同时也会汇报出CPU使用情况. ...

  3. JUnit备忘录

    测试方法不应该有参数 使用junit做测试的时候发现总是报错:Method XXX should have no parameters; 后来发现是因为测试方法里面函数参数

  4. Java in a Nutshell学习笔记

    1, bytecode永远是大段 2,其它语言要在java里运行,要么实现类似于javac的编译器,把该语言解释成为class文件.要么,直接重新实现JVM,直接解释该语言3,Java和C++区别: ...

  5. HTTP协议缓存机制的应用

    缓存的目 的是减少相应延迟 和 减少网络带宽消耗, 比如 css. js.图片这类静态资源应该进行缓存.实际项目 一般使用反向代理服务器(如 nginx. apache 等) 进行缓存. 关键字:ca ...

  6. Android 关于HttpClient上传中文乱码的解决办法

    使用过HttpClient的人都知道可以通过addTextBody方法来添加要上传的文本信息,但是,如果要上传中文的话,或还有中文名称的文件会出现乱码的问题,解决办法其实很简单: 第一步:设置Mult ...

  7. Linux开发工具之gdb(下)

    三.gdb调试(下) 01.查看运行时数据 print - 查看变量值 ptype - 查看类型 print array - 查看数组 print *array@len - 查看动态内存 print ...

  8. linux command cp.

    Examples cp file1.txt newdir Copies the file1.txt in the current directory to the newdir subdirector ...

  9. CentOS Kernel Source Install

    http://linuxmoz.com/centos-kernel-source-install/

  10. RestTemplate 微信接口 text/plain HttpMessageConverter

    一.背景介绍 使用 Spring Boot 写项目,需要用到微信接口获取用户信息. 在 Jessey 和 Spring RestTemplate 两个 Rest 客户端中,想到尽量不引入更多的东西,然 ...