Javascript 如何动态设置元素的高度？

我正在尝试在我的演示中动态设置元素的高度。我将告诉您，我在演示中使用的是静态或常量高度值。我使用的是250px常量值

 #wrapper{
    background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
    min-height: 250px;
    background-repeat: no-repeat; 
}

但是我需要动态地增加这个高度，我从中得到了高度

$scope.hgt =$window.innerHeight/3;
alert($scope.hgt)

但我需要将$scope.hgt设置为“包装器div动态”的最小高度。我不想获取div height的静态值。我想动态添加

这是我的密码

在jquery中，我需要做同样的事情

$('#wrapper').css('height': $window.innerHeight / 3)

---

您可以通过自己的指令实现这一点，该指令将动态添加css

标记

<div id="wrapper" set-height>
  <h4 class="headerTitle">tell Mother name</h4>
</div>

更好的解决方案是可以使用ng样式的指令，该指令期望值为JSON格式

<div id="wrapper" ng-style="{height: hgt+ 'px'}">
  <h4 class="headerTitle">tell Mother name</h4>
</div>

告诉母亲的名字

---

以下方法应该有效。将其放在代码笔片段中不会显示，因为窗口大小很小，所以它从“最小高度”属性中绘制高度。在一个更大的窗口上进行测试

<div id="wrapper" style="height: {{ hgt }}px" >
    <h4 class="headerTitle">tell Mother name</h4>
<div>

告诉母亲的名字

动态设置页眉页脚到元素的高度？ HTML

<div class="content-wrapper" win-height>
</div>

---

下面是一个将其他元素宽度应用于当前元素的示例

类名为“container”的元素的宽度将使用flexibleCss指令应用于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' 
             });
            };
   });

myApp.directive（'flexibleWidth'，function（）{
返回函数（范围、元素、属性）{
var className=attr.widthof；
var classWidth=angular.element（document.querySelectorAll（'.'+className）[0]）[0].clientWidth；
css（{
宽度：classWidth+‘px’
});
};
});

在什么条件下需要将该高度添加到元素中。&它应该根据什么计算？查看加载时。。我需要设置$window.innerHeight/3；到包装高度。意思是当我运行应用程序时，我得到了窗口高度的值。然后设置包装高度的值。你能添加你的html吗？对不起，我忘了给html代码检查我添加的答案。谢谢：）你介意更新代码笔吗？什么是它在codepen中不起作用的原因？我没说它在codepen上不起作用。高度设置不会显示，因为Codepen上的窗口高度为260px，将其除以3，得到的高度为86.67。但最小高度为250px，因此演示不会成功。不管怎样，这是密码笔。试试看。另外，Codepen中260px的窗口高度是标准分辨率，但可能会有所不同。不管是哪种方式，都要在全浏览器中进行测试。你为什么说它不工作？它似乎工作得很好。右键单击图元，然后单击“检查图元”。检查CSS。它正在将所需高度连接到元件。请确定。没问题。很高兴我能帮忙。嗨，你能帮我解决这个问题吗？没有px不能工作。它应该是：element.css（'height'，$window.innerHeight/3+'px'）；正确..谢谢提醒..；）但我认为它应该会起作用..因为codepen正在起作用..更新答案..看看它。

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()));
            }
        }
    }
})

<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' 
             });
            };
   });