动态操作元素的样式

TASK1：

需求：给指定元素动态添加样式

handleScroll=()=>{
    if(this.refs.scroll.getScrollTop()>0){
      this.refs.shadow.style.zIndex='1';
      this.refs.shadow.style.position='relative';
      this.refs.shadow.style.boxShadow = '0 5px 5px 0 rgba(0,0,0,0.02)';
      this.refs.shadow.style.webkitBoxShadow = '0 5px 5px 0 rgba(0,0,0,0.02)';
    }else if(this.refs.scroll.getScrollTop()==0){
      this.refs.shadow.style.zIndex='';
      this.refs.shadow.style.position='';
      this.refs.shadow.style.boxShadow = '';
      this.refs.shadow.style.webkitBoxShadow = '';
    }
  }

成长就是从一个很low很low的方法换到另一个很low的方法。。。。

handleScroll = () => {
    let toptab = document.getElementsByClassName('wea-email-list-left-tab-ops')[0];
    if(this.refs.scroll.getScrollTop() > 0){
      toptab.className='wea-email-list-left-tab-ops wea-email-list-left-tab-scroll'
    }else{
      toptab.className='wea-email-list-left-tab-ops'
    }
  }

小姐姐给的方法：

用状态控制

className={['class1',state==1?'class2':''].join('')}

https://blog.csdn.net/suwyer/article/details/81481507