vue 获取元素高度
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 获取元素高度相关的知识，希望对你有一定的参考价值。
参考技术A <div ref="elememt" > </div>//获取高度值
var height= this.$refs.text.offsetHeight; //100
//获取元素样式值,element 为元素ref="element"
var heightCss = window.getComputedStyle(this.$refs.element).height; // 100px
//获取元素内联样式值
var heightStyle =this.$refs.element.style.height; // 100px</pre>
JavaScript 怎么获取元素的宽度 ？
比如有一个DIV，在样式中设定宽度为“80%”，但是获取无论怎么获取到的都是“xxxPX”而不是“80%”，求解怎么才能获取到“80%”？
.
或者是，在样式中设定为“auto”，怎么获取这个“auto”？
var obj = document.getElementById("test");
alert(obj.height + "\\n" + obj.width);
// 200px 200px typeof=string只是将style属性中的值显示出来
扩展：
获取元素的实际大小
clientWidth和clientHeight
这组属性可以获取元素可视区的大小，可以得到元素内容及内边距所占据的空间大小。返回了元素大小，但没有单位，默认单位是px，如果你强行设置了单位，比如100em之类，它还是会返回px的大小。(CSS获取的话，是照着你设置的样式获取)。对于元素的实际大小，clientWidth和clientHeight理解方式如下：
a. 增加边框，无变化；
b. 增加外边距，无变化；
c. 增加滚动条，最终值等于原本大小减去滚动条的大小；
d. 增加内边距，最终值等于原本大小加上内边距的大小； 参考技术A
js都会将%转成具体的像素值。如果你需要获取具体的%。可以这样：
var _divwidth=$('#div').width();//获取元素的宽度var _width=$('body').width();//获取窗体的宽度
var width_bfb=(_divwidth/_width)*100+"%";//转换本回答被提问者和网友采纳 参考技术B <style type="text/css">
#aaa height:200px;width:80%;background:aqua
</style>
<script>
window.onload=function()
var a=document.getElementById('aaa');
alert(a.offsetWidth); //获得div的宽度
alert(a.offsetHeight); //获得div的高度
</script>
<div id="aaa">
asdfasfkdjk
</div> 参考技术C
假设，有如下 html 代码：
<!DOCTYPE html><html>
<body>
<div id="divTest" style="width:80%; background-color:#06F">
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
</div>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
则获取 div 元素的 百分比 宽度代码如下：
<script>function myFunction()
x=document.getElementById("divTest"); // 找到元素
alert(x.style.width); //获取style中的width
</script>
效果如图：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
RunJS 演示代码
</title>
<style>
div
border:1px solid black;
#div1
width:40%;
</style>
<script>
onload=function()
console.log(div1.offsetWidth);
console.log(parseInt(div1.offsetWidth*100/document.body.offsetWidth) + "%");
</script>
</head>
<body>
<div id="div1">
div1
</div>
</body>
</html>
以上是关于vue 获取元素高度的主要内容，如果未能解决你的问题，请参考以下文章