通过创建方法,减少不同浏览器通过JS设置样式时的重复书写

最新推荐文章于 2026-06-17 09:54:33 发布

原创最新推荐文章于 2026-06-17 09:54:33 发布 · 417 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #javascript

收录于

JavaScript 同时被 2 个专栏收录

7 篇文章

订阅专栏

CSS

4 篇文章

订阅专栏

本文介绍了一种方法来自动适配不同浏览器的CSS前缀，通过检测浏览器类型并为CSS属性添加相应的前缀，确保样式兼容性。适用于前端开发者。

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)
}