如何动态设置元素的高度? [英] how to set dynamically height to element?
问题描述
我试图在我的演示中为元素动态设置高度.我会告诉你问题我在演示中采用静态或恒定的高度值.我采用 250px 恒定值
#wrapper{背景图片:网址(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);最小高度:250px;背景重复:不重复;}
但是我需要动态添加这个高度.我从这个高度得到了
$scope.hgt =$window.innerHeight/3;警报($scope.hgt)
但我需要将 $scope.hgt 设置为 min-height 到 #wrapper div 动态?.我不想采用 div 高度的静态值.我想动态添加.
这是我的代码http://codepen.io/anon/pen/bdgawo
与我们在 jquery 中所做的一样,我需要在 angular 中做同样的事情
$('#wrapper').css('height': $window.innerHeight/3)
你可以简单地通过自己的指令实现这一点,该指令将动态添加 css
标记
<h4 class="headerTitle">告诉妈妈的名字</h4>
指令
.directive('setHeight', function($window){返回{链接:功能(范围,元素,属性){element.css('height', $window.innerHeight/3 + 'px');//element.height($window.innerHeight/3);}}})
更好的解决方案是您可以使用期望 JSON 格式值的 ng-style 指令.
<div id="wrapper" ng-style="{height: hgt+ 'px'}"><h4 class="headerTitle">告诉妈妈的名字</h4>
I am trying to set dynamically height to element in my demo .I will tell you issue I am taking static or constant value of height in my demo .I take 250px constant value
#wrapper{
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
min-height: 250px;
background-repeat: no-repeat;
}
But I need to add this height dynamically .I got height from this
$scope.hgt =$window.innerHeight/3;
alert($scope.hgt)
But I need to set $scope.hgt to min-height to #wrapper div dynamically?.I don't want to take static value of div height .I want to add dynamically .
here is my code http://codepen.io/anon/pen/bdgawo
same thing i need to in angular what we do in jquery
$('#wrapper').css('height': $window.innerHeight / 3)
You could simply achieve this by own directive which will add css dynamically
Markup
<div id="wrapper" set-height>
<h4 class="headerTitle">tell Mother name</h4>
</div>
Directive
.directive('setHeight', function($window){
return{
link: function(scope, element, attrs){
element.css('height', $window.innerHeight/3 + 'px');
//element.height($window.innerHeight/3);
}
}
})
The better solution would be you could use ng-style directive that expects the values in JSON format.
<div id="wrapper" ng-style="{height: hgt+ 'px'}">
<h4 class="headerTitle">tell Mother name</h4>
</div>
这篇关于如何动态设置元素的高度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!