js操作样式自动prefix

前言

在用vue写一个项目时，编译时vue-loader会自动给css加上合适的前缀，无需手动添加，无疑方便了很多。但是过程中，经常要用js动态添加样式，如此添加的样式就需要手动添加浏览器前缀了。相当的麻烦，还容易出错。下面介绍一种解决方法供大家参考。

获取样式表

首先的获取该浏览器支持的样式表，可以通过创建一个空标签来获取

var sty = document.createElement("div").style复制代码

通过chrome控制台打印出来是这样的(ps: 不同浏览器结果不同)

遍历样式表

现在前缀主要有这四种：webkit,moz,o,ms
通过遍历来匹配对应的前缀并返回

var vendor = (() => {let transformNames = {webkit: 'webkitTransform',moz: 'mozTransform',ms: 'msTransform',o: 'oTransfrom',Default: 'transform'};for(let key in transformNames) {if(sty[transformNames[key]] !== undefined) {return key;}}// 若都找不到，说明这个浏览器有毛病啦return false;
})();复制代码

使用

最后再封装成函数，即可使用了

function prefixStyle(style) {if(vendor === false) {return false;}if(vendor === 'Default') {return style;}//    对应前缀 +       首字母大写           +  剩余部分return vendor + style.charAt(0).toUpperCase() + style.substr(1);
}复制代码

测试

以上就是js中的css prefix。欢迎大家分享更多的解决办法。

js操作样式自动prefix相关推荐

html中js添加或删除activex,JS：操作样式表2 :用JS实现添加和删除一个类名的功能（addClass()和removeClass()）...
var box = document.getElementById("box"); box.id = "pox"; 将id = "box", ...
day04【JS高级】BOM对象、Window对象、二种定时器、 Location对象、DOM对象、DOM获取元素、DOM操作内容、DOM操作属性、DOM操作样式、DOM操作元素（标签）、正则表达式
回顾 1. js基础语法运算符:算数运算符可以与字符串进行数学运算,js底层进行隐式转换比较运算符:===(恒等) 特点,比较类型+内容流程控制语句if判断条件表达式:1)布尔2)数值:非0为真3)字 ...
js 操作元素属性、操作元素样式、display(none、block)
js操作元素属性 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
“是男人就下一百层”h5游戏全网最详细教学、全代码，js操作
"是男人就下一百层"h5游戏全网最详细教学.全代码,js操作博主的话游戏展示编程工具介绍游戏代码代码讲解 js 第一步切换div的显示与隐藏 js 第二步在菜单页面用 ...
浅谈Word.Application，关于js操作word文档的使用
这篇文章只是说个人放个笔记在这里,并没有讲解的意思,但为了进来的朋友能知道我在说啥,写的过程中我还是简单介绍一下. 官网地址:https://docs.microsoft.com/zh-cn/offi ...
【转载】常备JS操作
常备JS操作转自:http://www.cfcodes.com/?ID=221 //事件源对象 event.srcElement.tagName event.srcElement.type //捕获 ...
Python笔记_64_Vue_M-V-VM思想_显示数据_常用指令_操作属性_绑定事件_操作样式_条件渲染指令_列表渲染指令
文章目录 Vue vue.js的M-V-VM思想快速使用显示数据常用指令操作属性绑定事件操作样式条件渲染指令列表渲染指令 Vue vue.js是目前前端web开发最流行的工具库,由尤雨 ...
html自定义datajs,科技常识：HTML5的自定义属性data-*详细介绍和JS操作实例
今天小编跟大家讲解下有关HTML5的自定义属性data-*详细介绍和JS操作实例 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5的自定义属性data-*详细介绍和JS操作实例的 ...
jquery.cookie 使用文档，$.cookie() 文档教程， js 操作 cookie 教程文档。
jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...

js操作样式自动prefix

前言

获取样式表

遍历样式表

使用

测试

js操作样式自动prefix相关推荐

最新文章

热门文章