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

Question

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

Answer 1

原生JS(#id):

document.getElementById(id).clientWidth;

原生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);