Javascript 如何动态设置元素的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30547547/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to set dynamically height to element?
提问by user944513
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 250pxconstant value
我试图在我的演示中为元素动态设置高度。我会告诉你问题我在演示中采用静态或恒定的高度值。我采用250px恒定值
#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.hgtto min-height to #wrapper div dynamically?.I don't want to take static value of div height .I want to add dynamically .
但是我需要将$scope.hgt设置为min-height 到 #wrapper div 动态？。我不想采用 div 高度的静态值。我想动态添加。
here is my code http://codepen.io/anon/pen/bdgawo
这是我的代码 http://codepen.io/anon/pen/bdgawo
same thing i need to in angular what we do in jquery
同样的事情我需要在 angular 中我们在 jquery 中所做的
$('#wrapper').css('height': $window.innerHeight / 3)
回答by Pankaj Parkar
You could simply achieve this by own directive which will add css dynamically
您可以通过自己的指令简单地实现这一点，该指令将动态添加 css
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.
更好的解决方案是您可以使用期望 JSON 格式的值的 ng-style 指令。
<div id="wrapper" ng-style="{height: hgt+ 'px'}">
<h4 class="headerTitle">tell Mother name</h4>
</div>
回答by srthu
The following should work. Putting it in the codepen snippet won't show as the window size is small so it draws height from the min-height attribute. Test it out on a bigger window.
以下应该工作。将它放在 codepen 片段中不会显示，因为窗口大小很小，因此它从 min-height 属性中绘制高度。在更大的窗户上测试一下。
<div id="wrapper" style="height: {{ hgt }}px" >
<h4 class="headerTitle">tell Mother name</h4>
<div>
回答by Chirag Suthar
set dynamically height with header footer to element? HTML
将页眉页脚动态高度设置为元素？ HTML
<div class="content-wrapper" win-height>
</div>
JS
JS
app.directive('winHeight', function ($window) {
return{
link: function (scope, element, attrs) {
angular.element(window).resize(function () {
scope.winHeight();
});
setTimeout(function () {
scope.winHeight();
}, 150);
scope.winHeight = function () {
element.css('min-height', angular.element(window).height() -
(angular.element('#header').height() +
angular.element('#footer').height()));
}
}
}
})
回答by ramesh
Here is an example for applying other elements width to current element.
这是将其他元素宽度应用于当前元素的示例。
Width of the element which has the class name "container" will apply to div using flexibleCss angular js directive
具有类名“容器”的元素的宽度将使用flexibleCss angular js指令应用于div
<div flexible-width widthof="container">
</div>
myApp.directive('flexibleWidth', function(){
return function(scope, element, attr) {
var className = attr.widthof;
var classWidth = angular.element(document.querySelectorAll('.'+className)[0])[0].clientWidth;
element.css({
width: classWidth+ 'px'
});
};
});
