先设置元素的ref，如 <div style="height: 500px" ref="tablewrap" ></div>，要获取该元素高度，必须先给该元素设置css高度
再用 windowgetComputedStyle(this$refstablewrap)height 获取
注意：用this$refs获取dom元素高度，必须在mounted钩子中，如下：
mounted() {
consolelog(windowgetComputedStyle(this$refstablewrap)height)
}
给element表格设置动态高度，就可以用上述方法
在data中定义变量
最后，在mounted钩子中设置表格的高度
设置了“display:none”的元素本来就是没有高度的。
在使用jQuery的height方法去获取元素的高度的时候，会对设置了“display:none”的隐藏元素进行一些处理，临时把元素的样式设置成：
display:block;visibility:hidden;
position:absolute;
这样获取到元素的高度以后，再恢复成原来的属性。
可以使用offset() 方法，该方法返回或设置匹配元素相对于文档的偏移（位置），该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
1、使用offset() 方法获取一个元素距离浏览器的顶部和左边的可视距离，代码如下：
<html><head>
<script type="text/javascript" src="/jquery/jqueryjs"></script>
<script type="text/javascript">
$(document)ready(function(){
$("button")click(function(){
x=$("p")offset();
$("#span1")text(xleft);
$("#span2")text(xtop);
});
});
</script>
</head>
<body>
<p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>
<button>获得 offset</button>
</body>
</html>
2、运行的结果如下：
对于元素的实际大小，offsetWidth和offsetHeight理解如下：
1增加边框，最终值会等于原本大小加上边框大小
2增加内边距，最终值会等于原本大小加上内边距大小
首先我们来看一下官方的实际例子，不过该代码整体封装比较强，可能对于初学者来说有点难度，具体代码如下：
'use strict'
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
ScrollView,
} from 'react-native'
var NUM_ITEMS = 20;
var PerfectProject = ReactcreateClass({
Statics: {
titles: '<ScrollView>',
description: 'Component that enable scrolling through child component',
},
makeItems: function(nItems: number, styles) : Array<any> {
var items = [];
for (var i=0;i<nItems;i++){
items[i] = (
<TouchableOpacity key={i} style={styles}>
<Text style={{fontSize:20 }}>{'Item text' + i}</Text>
</TouchableOpacity>
);
}
return items;
},
render: function(){
var items = thismakeItems(NUM_ITEMS,stylesitemWrapper);
items[4] = (
<ScrollView key={'ScrollView'} horizontal={true}>
{thismakeItems(NUM_ITEMS,[stylesitemWrapper,styleshorizontalItemWrapper])}
</ScrollView>
);
var verticalScrollView=(
<ScrollView style={stylesverticalScrollView}>
{items}
</ScrollView>
);
return verticalScrollView;
},
});
var styles = StyleSheetcreate({
itemWrapper: {
backgroundColor: '#dddddd',
alignItems: 'center',
borderWidth: 5,
borderColor: 'red',
borderRadius: 5,
padding: 30,
margin: 5,
},
horizontalItemWrapper: {
padding: 50,
},
verticalScrollView:{
backgroundColor: 'aquamarine',
margin: 10,
},
});
1、为svg元素定义id为:svgobj。
2、var el=documentquerySelector("#svgobj");使用选择器找到该对象；
3、高度：alert( eloffsetWidth )，宽度：alert( eloffsetHeight)
该方法在较新版本的火狐下测试通过。
以上就是关于vue 中用this.$refs获取dom元素高度，给element表格设置动态高度全部的内容，包括:vue 中用this.$refs获取dom元素高度，给element表格设置动态高度、关于jQuery获取隐藏元素的高度的问题、jquery获取元素距离浏览器顶部的可视高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）