问题:页面中有多个表格,需要使所有的表格按照最大的长度一起横向滚动,但是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>