主页 / 问题 / 1254747
Accepted
Alexei
Asked:2022-03-12 09:02:15 +0000 UTC2022-03-12 09:02:15 +0000 UTC

如何通过js设置带前缀的css属性？

  • 772

我需要通过JS和transition属性设置css属性。我想通过 JS 添加供应商前缀。该脚本不适用于 cssText，没有它们，只会添加一个没有前缀的过渡。如何通过 JS 添加前缀转换？

document.addEventListener('DOMContentLoaded', () => {
    
    class MenuToggler{
        constructor(data){
            this.menuTriggerSelector = data.menuTriggerSelector;
            this.menuSelector = data.menuSelector;
            this.type = data.type || 'appear'; //type of Apperance
            
            this.menuTrigger = document.querySelector(`${this.menuTriggerSelector}`);
            this.menu = document.querySelector(`${this.menuSelector}`);
            
            this.transitionTime = data.transitionTime || '.25s';            
            this.init();
        }
        
        init(){
            if (this.type == 'appear'){
                // add first styles, makes elem invisible and untouchuble
                
                this.menu.style.height = '0px';
                this.menu.style.opacity = '0';
                this.menu.style.transition = `opacity ${this.transitionTime} linear ${this.transitionTime}, height 0s linear 0s`;
                this.menu.style.cssText = `-webkit-transition: opacity ${this.transitionTime} linear ${this.transitionTime}, height 0s linear 0s`;
                this.menu.style.cssText = `-o-transition: opacity ${this.transitionTime} linear ${this.transitionTime}, height 0s linear 0s`;
            }
        }
    }
    
    const menuToggler1 = new MenuToggler({
        menuTriggerSelector: '.burger',
        menuSelector: '.links-wrapper'
    });
    
});

javascript

2 个回答

  1. Best Answer

    使用kebab-case -> camelCase

    -webkit-transition变成webkitTransition

    // Можно посмотреть как это выглядит на примере всех стилей,
// которые начинаются с align...
const div = document.createElement('div')
document.body.appendChild(div)

Object.entries(getComputedStyle(div))
  .filter(([p, v]) => (p.startsWith('align') || v.startsWith('align')))
  .forEach(([p, v]) => console.log(`${p} -> ${v}`))

    更新：上述属性可能不会同时存在于所有浏览器中

    • -webkit- (Chrome, Safari, iOS Safari / iOS WebView, Android)
    • -moz-（火狐）
    • -ms-（边缘，Internet Explorer）
    • -o- (Opera, Opera Mini)

    ...因此，无法安装它们并在控制台中查看它们。

    如果你想通过JS设置前缀，你需要检查你要找的属性是否存在。在每一行代码中都这样做是不明智的。

    我们正在编写一个小型库。我们的任务是为任何浏览器委派正确的前缀设置，而不使用这些相同的前缀。

    // Определение всех доступных префиксов
const stylePrefix = (() => {
  const prefix = ['webkit', 'moz', 'ms', 'o'].join('|')
  const replace = new RegExp(`^(${prefix})([A-Z])`)
  // Создадим карту соответствия имен
  const sp = new Map( /* "appRegion" => "webkitAppRegion", ... и т.д. */ )
  const all = Object.keys(window.getComputedStyle(document.createElement('div')))
    .filter((v) => !/[0-9]/.test(v))
  for (let s of all) {
    if (!replace.test(s)) {
      continue
    }
    // Некоторые стили повторяются и могут быть доступны как с префиксами, так и без
    // ... те что доступны не устанавливаем в sp:Map
    // webkitTransition => transition
    let pr = s.replace(replace, (_, __, ch) => ch.toLowerCase())
    if (!all.includes(pr))
      sp.set(pr, s)
  }
  // Кому интересно, можете скопировать участок кода "const stylePrefix = (...)()"
  // в консоль браузера и расскоментить эту строку
  // console.log(sp)
  return {
    has(s) {
      return sp.has(s)
    },
    get(s) {
      return sp.has(s) ? sp.get(s) : null
    }
  }
})()

// Пихаем это в нашу библиотеку
const myLib = {
  // Тут мы будем управлять стилями
  style: {
    set(element, styles) {
      for (let [s, v] of Object.entries(styles)) {
        element.style[stylePrefix.get(s) || s] = v
      } //, ...
    }
  },
  //...
}

// Далее используем в коде
const p = document.querySelector('p')
myLib.style.set(p,
  // Вот так удобнее использовать в любом участке кода,
  // и нет необходимости указывать префиксы
  {
    border: 'solid 10px #9e9e9e',
    borderStartColor: 'red' // НЕподдерживаемый стиль -webkit-border-start-color
  }
)

// Смотрим что реально установилось
console.log(`borderStartColor: ${p.style.borderStartColor}`)
console.log(`webkitBorderStartColor: ${p.style.webkitBorderStartColor}`)
    <p>Этому параграфу будет установлен -webkit-border-start-color</p>

    • 2 
  2. this.menu.style.MozTransition = '...';
this.menu.style.WebkitTransition = '...';
this.menu.style.transition = '...';

    还要注意属性的顺序，没有前缀的属性应该总是最后给出。否则，可能是浏览器支持transitionand -webkit-transition，而你最后指定的正好是-webkit-*，那么就会应用。反过来，这可能会导致许多性能问题，因为“幕后”的前缀属性可以处理错误。

    • 1

相关问题