如何使用AngularJS获取元素的宽度？

Question

我意识到我可以使用jQuery来获取元素的宽度，但我很好奇;有没有办法使用AngularJS？

Answer 1

原生JS（#id）：

document.getElementById(id).clientWidth;

Native JS（querySelector（class，id，css3 selector））：

document.querySelectorAll(".class")[0].clientWidth;

将其插入angular.element：

angular.element(document.getElementById(id)).clientWidth;
angular.element(document.querySelectorAll(".class")[0]).clientWidth;

如果您需要获取非舍入数字，请使用getBoundingClientRect。

angular.element(document.getElementById(id)).getBoundingClientRect();

有关该主题的一些资源：

• http://msdn.microsoft.com/en-us/library/hh781509(VS.85).aspx
• https://developer.mozilla.org/en-US/docs/Web/API/Element.clientWidth
• https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect

如果这在语法方面漂浮你的船，并且不需要将jQuery插入混合中，请注意跨浏览器地狱。

Answer 2

如果你在所有这些建议中一直像我一样挠头而且它们不起作用，我发现我必须设置超时。我不知道为什么，也许是因为我在我的div上使用了材料设计属性。

setTimeout(function(){
     var divsize = angular.element(document.getElementById('fun_div')).prop('offsetWidth');   
     console.log('Width of fun_div: ' + divsize);
    },50);