Question

如何获取隐藏元素的宽度（在css样式中设置）？

的CSS：

a{
  position: absolute;
  width: 40px;
  height: 40px;
  background: pink;
}

JS：

var nav = $('.nav');
nav.hide();

nav.hover(function(){
  nav.stop().animate({opacity: 1}, 300);
}, function(){
  nav.stop().animate({opacity: 0}, 500);
});

$('<a>', {
css: { left: 940 / 2 - ($(this).width() / 2), // <-- here it seems to be 0
click: function(){
    alert($(this).width()); // here it works
    return false;
  }
}).appendTo(nav);

Answer 1

这可能是不可能的，因为$(this)在这种情况下引用window对象而不是<a>元素。只有在函数的上下文中调用时，this引用才会正确绑定到新创建的元素。

可能有一种方法可以使用闭包将元素注入this但我无法弄清楚如何 - 有兴趣看看是否有人可以提出解决方案。

在此之前，这种替代方案不那么优雅，但始终有效：

mylink = $('<a>', {
    id: 'test',
   click: function(){
   alert($(this).width()); // here it works
   return false;
 }
}).appendTo($("body")).html("Test");;

mylink.css({ left: mylink.width() / 2});

JSFiddle

Answer 2

- 假设您需要.nav元素的宽度（已隐藏的元素）。

因为你正在使用$('<a>')，所以你实际上正在创建一个锚标记，在这种情况下，$（this）将引用锚元素而不是.nav元素，因此它的宽度将为0。

如果你想获得.nav元素的宽度你可以使用

$('.nav').width();这将获得匹配元素的宽度。

Answer 3

请试试这个：

$('a').click(function(){
    $(this).appendTo(nav);
    alert($(this).width());
    $(this).css('left', ($(this).width() / 2));
    return false;
})

jQuery - 如果元素被隐藏，$（this）.width（）不起作用！

3 个答案: