web-dev-qa-db-ja.com

要素に動的に高さを設定する方法は？

私は私のデモで要素に動的に高さを設定しようとしています。デモで高さの静的または一定の値を取っていることを教えてくれます。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をmin-heightから#wrapper divに動的に設定する必要がありますか？divの高さの静的な値を取得したくない。動的に追加したい。

ここに私のコードがあります http://codepen.io/anon/pen/bdgawo

angularでjqueryで行うことと同じこと

$('#wrapper').css('height': $window.innerHeight / 3)
javascriptangularjsangularjs-directiveangularjs-scopeangularjs-ng-repeat
13
user944513

あなたはCSSを動的に追加する独自のディレクティブでこれを簡単に達成できます

マークアップ

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

ディレクティブ

.directive('setHeight', function($window){
  return{
    link: function(scope, element, attrs){
        element.css('height', $window.innerHeight/3 + 'px');
        //element.height($window.innerHeight/3);
    }
  }
})

より良い解決策は、JSON形式の値を期待するngスタイルのディレクティブを使用できることです。

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

Working Codepen

22
Pankaj Parkar

要素にヘッダーフッターで動的に高さを設定しますか？ [〜＃〜] html [〜＃〜]

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

[〜＃〜] 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()));
            }
        }
    }
})
1
Chirag Suthar

以下は、他の要素の幅を現在の要素に適用する例です。

クラス名「container」を持つ要素の幅は、flexibleCss angular js directiveを使用して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' 
             });
            };
   });
1
ramesh

以下が機能するはずです。コードペンスニペットに配置しても、ウィンドウサイズが小さいため表示されないため、min-height属性から高さを描画します。大きなウィンドウでテストしてください。

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