web-dev-qa-db-fra.com

comment définir dynamiquement la hauteur à l'élément?

J'essaie de régler dynamiquement height à element dans ma démo .Je vous dirai que je prends la valeur statique ou constante de height dans ma démo .Je prends 250px valeur constante 

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

Mais j’ai besoin d’ajouter cette hauteur de façon dynamique. 

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

Mais je dois définir $ scope.hgt de min-height à #wrapper div dynamiquement? .Je ne veux pas prendre la valeur statique de div height .Je veux ajouter de façon dynamique.

voici mon code http://codepen.io/anon/pen/bdgawo

la même chose que je dois en angulaire ce que nous faisons en jQuery 

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

Vous pouvez simplement y arriver par votre propre directive qui ajoutera dynamiquement css

Balisage

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

La meilleure solution serait d’utiliser une directive de style ng qui attend les valeurs au format JSON.

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

Codepen de travail

22
Pankaj Parkar

Ce qui suit devrait fonctionner. Si vous le placez dans l'extrait de code, cela ne s'affichera pas car la taille de la fenêtre est petite et il tire donc la hauteur de l'attribut min-height Testez-le sur une fenêtre plus grande.

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

définir dynamiquement height avec footer en-tête sur element? 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

Voici un exemple d'application de la largeur d'autres éléments à l'élément actuel.

La largeur de l’élément portant le nom de classe "conteneur" s’appliquera à div en utilisant la directive flexibleCss angular 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