web-dev-qa-db-ja.com

AngularJSでJQueryを使用せずにHTML要素の高さを取得する

AngularJSに慣れてきました。私はできる限り「純粋」になろうとしています。そのため、jQueryを含めないようにしています。ただし、HTML要素の高さを取得するのは難しいです。現在、私は次を試しています：

angular.module('myModule', [])
  .directive('myDirective', function() {
    return {
        restrict: 'A',
        link: function(scope, element) {
            console.log(element.css('height'));
        }
    };
  })
;

ただし、このコードが実行されると、空の行がコンソールに書き込まれます。要素の高さを表示しようとしています。 jQueryを使用せずにAngularJSでこれを行う方法はありますか？

ありがとうございました！

cssangularjs
47
user3284007

これは正しく機能しているようで、使用すると同じ結果が得られます：

element.style.height

要素にはインラインスタイルまたはCSSの高さが設定されていないため、空白行が表示されます。スタイルに依存する代わりに、HTML要素の高さを直接取得できます。

console.log(element[0].offsetHeight);

http://plnkr.co/edit/03YWwjBjYpid4fVmDxlM?p=preview

HTML要素の実際の幅と高さを取得する方法

61
shaunhusain

angularによって提供される要素の小さなラッパーにより、プロパティを要求できます。

element.prop('offsetHeight');

正常に動作します： http://plnkr.co/edit/pFHySDo7hjEcMKCqGuiV?p=preview

23
IxDay