Question

我将尝试使用ng-style在div上设置新的高度。我试图用宽度因子计算这个div的新高度。看起来像这样：

var a = bigImage.style.width/topImage.style.width;
var heigthNewImage = bigImage.style.height/a;

唯一的问题是它给了我NaN。那么我如何以正确的方式获得div元素的宽度和高度值？所以它给了我正确的值来设置另一个div元素的高度。

var bigImage = document.getElementById('bigImage').style;
var topImage = document.getElementById('topImage').style;
var a = bigImage.width/topImage.width;
var heigthNewImage = bigImage.height/a;
vm.convertheight = {
  height: heigthNewImage
};

body{
	padding:0;
	margin:0;
}

/*.small-image{

position:sticky; top:0; left:0;
}*/

#bigImage{
	width:3000px;
	height: 2000px;
	
}
#topImage{
	position:sticky;
 	top:0;
 	left:0;
	height:250px;
	width:300px;
	background-repeat: no-repeat;
	background-image: url('../img/scale.jpg');
	background-size: 400px 250px;
}

.movingBox{
	/*height:50px;*/
	width:300px;
	border: 1px solid red;
}

<div id="topImage" ng-mousedown="vm.mouseDown()">
  <div class="movingBox"  ng-mousemove="vm.mouseMove()" ng-mouseup="vm.mouseUp()" ng-style="{ 'height' : vm.convertheight + 'px' }"></div>
</div>
<div class="container-fluid">
  <img id="bigImage" src="assets/img/scale.jpg" >
</div>

Answer 1

var a = bigImage.style.width/topImage.style.width;

你最有可能获得NAN，因为你在实际渲染dom之前进行了计算，结果是0/0。

假设你的dom中确实存在这些元素，如果你将代码包装在$ timeout内，代码将在渲染完成后执行

$timeout(function(){
  $scope.height= bigImage.style.width/topImage.style.width;
})

使用ng-style转换div的新高度

1 个答案: