码迷,mamicode.com
首页 > Web开发 > 详细

css/js 小技巧

时间:2020-07-25 09:18:35      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:UNC   mst   pos   position   return   scss   移动   false   top   

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%);   // 然后在向上移动一半个自己的身位
    }
  }

css/js 小技巧

标签:UNC   mst   pos   position   return   scss   移动   false   top   

原文地址:https://www.cnblogs.com/qian-shan/p/13375266.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!