css/js 小技巧

Posted 2020-12-18 qian-shan

js中动态添加的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)
}

js中获取/设置指定元素的属性（height等）

//给该元素添加ref属性，通过引用来获取
this.imageHeight = this.$refs.bgImage.clientHeight
this.$refs.list.style.top = `${this.$refs.bgImage.clientHeight}px`;
// 如果使用属性名的变量的话就不好使用点来设置属性值：
let transform = ‘webkitTransform‘
this.$refs.bgImage.style[transform] = `scale(${scale})`

将元素的移到中间

父容器设置position为relative或者fix
子元素设置position为absolute， top

  .list {
    position: fixed;   // 父容器设置为relative护着fix
    .loading-wrapper{
      position: absolute;  //子容器设置为absolute
      width: 100%;
      top: 50%;    //  top为 50%
      transform: translateY(-50%);   // 然后在向上移动一半个自己的身位
    }
  }