Question

我正在尝试创建自己的垂直进度条，并且正在考虑通过CSS3制作动画。我目前将其设置为角度指令，在点击时，它应该更改内部div的height属性。但是，当我在console.log（element.children（）。css（'height'））时，它返回一个空值，即使我已经将初始高度设置为10％？

angular.js指令

teacherApp.directive('clickToChangeHeight', function(){
  return {
    link: function(scope, element, attrs) {
      element.bind('click', function() {
        var height = element.children().css('height');
        console.log(height)
        //element.children().css('height', finalHeight);
      });
    }
  }
})

玉标记

div(ng-controller='TvCtrl')
  .outer(click-to-change-height)
    .inner

CSS

.outer {
  position: relative;
  overflow: hidden;
  width: 30px;
  height: 140px;
  border: 2px solid #ccc;
}

.inner {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  width: 100%;
  height: 10%;
  background-color: #999;
  -webkit-transition: height 2s;
}

Answer 1

如果你不包含jquery，angularJS默认使用jquery lite。您可以在源代码here中找到jquery lite如何实现css函数（第405行）。如图所示，当你没有将“value”参数传递给函数时，它只返回它在元素的style属性中找到的内容：

val = val || element.style[name];

表示如果您设置了.inner

的style属性

<div class="inner style="height:30px"> </div>

然后你将在console.log中打印30px，但如果你没有，它将找不到你在css文件中设置的高度值。

但是，我认为你想要的是使用css函数来设置高度而不仅仅是打印，只需使用

element.children().css('height', finalHeight)

正如您所想，可以根据需要设置样式。从现在起css函数是setter，并将inner的style属性的“height”设置为finalHeight

angular.js中的垂直进度条未显示正确的高度

1 个答案: