|
在实际开发中，想做一个没有右边滚动条的页面，里面是嵌入table，这个时候我们会在最外层加上overflow:hidden,这个时候就没有右边滚动条，
在mounted的时候加入页面改变的监听事件
mounted():{
//窗口改变，重新取得高度
window.addEventListener('resize', ()=>{
clearTimeout(this.resizeFlag)
this.resizeFlag = setTimeout(() => {
this.getTableHeight()
}, 300);
})
}
然后在我们的getTableHeight()里面去计算table的高度
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;//屏幕的高度
let searchHeight = this.$refs.title_box.offsetHeight;//搜索框的高度
let logoHeight = parseInt(this.$refs.logo.offsetHeight)+parseInt(this.computedStyle(this.$refs.logo,'marginTop').replace('px',''))+parseInt(this.computedStyle(this.$refs.logo,'marginBottom').replace('px',''));//logo的高度+logo的margin
let paddingHeight = parseInt(this.computedStyle(this.$refs.hsjcBaseInfo,'paddingTop').replace('px',''))+parseInt(this.computedStyle(this.$refs.hsjcBaseInfo,'paddingBottom').replace('px',''));//表格的内边距高度
let marginHeight = parseInt(this.computedStyle(this.$refs.body_item,'marginBottom').replace('px',''))+parseInt(this.computedStyle(this.$refs.body_wheel,'marginTop').replace('px',''));//margin的高度
let paginationHeight =parseInt( this.computedStyle(this.$refs.paginationbox,'height').replace('px',''))+parseInt(this.computedStyle(this.$refs.paginationbox,'marginTop').replace('px',''));//分页的高度
this.$refs.title_table.style.height = clientHeight - searchHeight - logoHeight - paddingHeight - marginHeight - paginationHeight - 30 + 'px'
这里面通过这个计算元素的padding,margin,width,height等值
//获取元素的margin,width,padding,height 兼容ie写法
computedStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return document.defaultView.getComputedStyle(obj, null)[attr];
}
},
获取元素的属性值
getComputedStyle(element[,pseudo])
该语法一般有两种用法：
document.defaultView.getComputedStyle(element[,pseudo]);
或者
window.getComputedStyle(element[,pseudo]);
<head>
<style>
#myDiv {
height: 300px;
width: 300px;
margin: 18px auto;
padding: 15px;
border: 5px solid #dddddd;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<script>
var div = document.getElementById("myDiv");
var computedStyle = getComputedStyle(div, null);
alert(computedStyle.marginTop);
</script>
</body>
为了实现IE和火狐、谷歌的兼容，JS可以这样写：
<script>
// 兼容IE和火狐谷歌等的写法
if (window.getComputedStyle) {
var computedStyle = getComputedStyle(div, null)
} else {
computedStyle = div.currentStyle;//兼容IE的写法
}
alert(computedStyle.marginTop);
</script>
getComputedStyle 和 style 异同
getComputedStyle 和 element.style 的相同点就是二者返回的都是 CSSStyleDeclaration 对象，取相应属性值得时候都是采用的 CSS 驼峰式写法，均需要注意 float 属性。
而不同点就是：
element.style 读取的只是元素的内联样式，即写在元素的 style 属性上的样式；而 getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。
element.style 既支持读也支持写，我们通过 element.style 即可改写元素的样式。而 getComputedStyle 仅支持读并不支持写入。我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式
我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式。
|