使用javascript设置供应商加前缀的CSS

...是一个巨大的痛苦。使用javascript设置供应商加前缀的CSS

var transform = 'translate3d(0,0,0)'; 
elem.style.webkitTransform = transform; 
elem.style.mozTransform = transform; 
elem.style.msTransform = transform; 
elem.style.oTransform = transform;

有没有一个库/框架/更好的方法来做到这一点？最好只用一行JS？

来源

2012-01-17 Ender

我不知道任何这样做的库，但如果它们全都只是前缀 - 也就是说，在名称或语法上没有区别 - 自己编写函数将是微不足道的。

function setVendor(element, property, value) { 
    element.style["webkit" + property] = value; 
    element.style["moz" + property] = value; 
    element.style["ms" + property] = value; 
    element.style["o" + property] = value; 
}

然后你可以在大多数情况下使用它。

来源

2012-01-17 02:59:03

+16

请确保您大写属性名称（'Transform'而不是'transform'）。我发现这很难... – 2013-06-12 20:11:38

有这么照顾它这个jQuery插件 https://github.com/codler/jQuery-Css3-Finalize

来源

2012-01-17 09:46:26

他没有要求一个jQuery的工具。 – 2015-02-28 22:24:42

@AdamArold他要求'图书馆/框架/更好的方式来做到这一点'。这可以是一个jQuery插件 – 2016-05-27 13:24:54

您可以使用JavaScript与下列代码 -

var prefix = (function() { 
    var styles = window.getComputedStyle(document.documentElement, ''), 
    pre = (Array.prototype.slice 
     .call(styles) 
     .join('') 
     .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']) 
    )[1], 
    dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1]; 
    return { 
    dom: dom, 
    lowercase: pre, 
    css: '-' + pre + '-', 
    js: pre[0].toUpperCase() + pre.substr(1) 
    }; 
})();

上面找到相应的供应商前缀则返回各自的浏览器厂商的目标字首。

在我的脚本中保存了很多重复的代码。

来源 - 戴维·沃尔什的博客：https://davidwalsh.name/vendor-prefix

来源

2015-07-21 13:03:34

请直接在这里发布你的外部链接答案的相关部分，因为外部源可能会改变。 – IngoAlbers 2015-07-21 13:19:18

当然。谢谢... – 2015-07-24 05:39:06

这种方法的作用是在样式声明中始终存在一个供应商的前缀属性。 – 2015-09-20 17:55:38

这是目前2015年末，形势已经略有改变。首先，McBrainy关于上述资本化的评论很重要。 webkit前缀现在是Webkit，但幸运的是，此时只有Safari使用。现在Chrome和Firefox都支持el.style.transform而没有前缀，我认为IE也是如此。下面是针对当前任务的一个稍微更现代化的解决方案。它首先检查，看看是否我们甚至需要前缀我们的转换属性：

var transformProp = (function(){ 
    var testEl = document.createElement('div'); 
    if(testEl.style.transform == null) { 
    var vendors = ['Webkit', 'Moz', 'ms']; 
    for(var vendor in vendors) { 
     if(testEl.style[ vendors[vendor] + 'Transform' ] !== undefined) { 
     return vendors[vendor] + 'Transform'; 
     } 
    } 
    } 
    return 'transform'; 
})();

之后，我们可以只使用一个简单的一行调用一个元素上更新transform属性：

myElement.style[transformProp] = 'translate3d(0,' + dynamicY + 'px,0)';

来源

2015-09-13 07:01:57 cacheflowe

似乎Firefox对非前缀转换的支持现在非常普遍：http://caniuse.com/#search=transform – 2016-12-01 18:26:29

例如，如果您使用Gulp设置工作流程，则可以使用Postcss autoprefixer这是解决浏览器供应商前缀问题的便捷工具。它使用JS来转换你的CSS。

来源

2017-02-27 13:16:01

使用javascript设置供应商加前缀的CSS

回答

相关问题