it-swarm.com.de

wie man dynamisch Höhe zum Element einstellt?

Ich versuche in meiner Demo die Höhe des Elements dynamisch einzustellen. Ich werde Ihnen mitteilen, dass ich in meiner Demo einen statischen oder konstanten Wert der Höhe nehme. Ich nehme 250px konstanten Wert

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

Aber ich muss diese Höhe dynamisch hinzufügen. Ich habe Höhe daraus

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

Aber ich muss $ scope.hgt auf min-height setzen, um #wrapper div dynamisch zu erzeugen. Ich möchte keinen statischen Wert für div height verwenden. Ich möchte dynamisch hinzufügen.

hier ist mein Code http://codepen.io/anon/pen/bdgawo

gleiches muss ich im Winkel tun, was wir in jquery tun

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

Sie können dies einfach durch eine eigene Direktive erreichen, die css dynamisch hinzufügt

Markup

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

Richtlinie

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

Die bessere Lösung wäre, Sie könnten eine ng-style-Direktive verwenden, die die Werte im JSON-Format erwartet.

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

Working Codepen

22
Pankaj Parkar

Folgendes sollte funktionieren. Das Einfügen in das Codepen-Snippet wird nicht angezeigt, da die Fenstergröße klein ist. Daher wird die Höhe aus dem Min-Height-Attribut gezogen. Testen Sie es an einem größeren Fenster.

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

dynamisch Höhe mit Kopfzeile auf Element? HTMLsetzen

<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

Hier ist ein Beispiel für das Anwenden anderer Elemente auf das aktuelle Element.

Die Breite des Elements, das den Klassennamen "container" hat, gilt für div mit der flexibleCss-Direktive js

<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