使用JavaScript删除CSS属性

298 阅读1分钟

问题:页面中有多个表格,需要使所有的表格按照最大的长度一起横向滚动,但是element 的tabel组件封装是在自己的容器内部横向滚动,这样多个表格需要分别滚动才能看清楚最后的内容,需要改成所有表格随外层容器一起滚动的效果,查看css样式表发现,tabel内部自己做了处理heidden起来了,这时需要将tabel自己的限制取消,使用我们自定义的css样式

//代码解决,在添加表格的时候获取需要处理的元素
let arr3 = document.querySelectorAll('.el-table--scrollable-x');
this.resetArr(arr3,'overflow-x');

//node->调整的元素 , pro->调整元素对应的属性
resetArr(node,pro){
  node.forEach((item)=>{
      item.style.setProperty(atr, 'initial');
    })
},
js操作css属性方式总结
  • 1.dom.style.pro
  • 2.dom.setAttribute(pro,值) -->自定义的元素属性
  • 3.dom.removeAttribute(pro)-->自定义的元素属性
  • 4.dom.setProperty('color','initial');
  • 5.dom.removeProperty('color');
  <style>
    #box {
      width:50px;
      height:50px;
      color: pink;
    }
  </style>
<body>
  <div>
    <div id="box">
      12331
    </div>
    <div>
      <button id="style">style.color</button>
      <button id="setAttribute">setAttribute</button>
      <button id="removeAttribute">removeAttribute</button>
      <button id="setProperty">setProperty</button>
      <button id="removeProperty">removeProperty</button>
    </div>
  </div>
  <script>
    let $box = document.getElementById('box');
    let $style = document.getElementById('style');
    let $setAttribute = document.getElementById('setAttribute');
    let $removeAttribute = document.getElementById('removeAttribute');
    let $setProperty = document.getElementById('setProperty');
    let $removeProperty = document.getElementById('removeProperty');
    $style.onclick = function(){
      $box.style.color = $box.style.color == 'red' ? 'pink' : 'red';
    }
    $setAttribute.onclick = function(){
      $box.setAttribute('setAtr','123')
    }
    $removeAttribute.onclick = function(){
      $box.removeAttribute('setAtr')
    }
    $setProperty.onclick = function(){
      $box.style.setProperty('color','initial');
      //initial将属性值重置为初始值
      // $box.style.setProperty('color','yellow');
      //设置对应的颜色
    }
    $removeProperty.onclick = function(){
      $box.style.removeProperty('color');
    }
  </script>
 </body>