jQuery：.width() 返回 css-set 百分比直到窗口调整大小，然后返回像素宽度。为什么？

Question

在 console.loging 我的代码之后，我终于确定了问题：

我正在尝试确定一些嵌套 div 的像素宽度，并且到处都在告诉我 jQuery 的 .width() 应该可以解决问题。麻烦的是，在页面刷新时它返回 div 宽度的百分比值（如在 css 中设置的那样）。 然后当我触发窗口调整大小事件时， .width() 开始返回像素宽度！

这是我的（非常简化的）html：

<div id="hud">
    <div class="character-position active" id="character-position-1" data-character-name="Character 1">
        <div class="character-tag" data-position="left">
        </div>
    </div>
    <div class="character-position active" id="character-position-2" data-character-name="Character 2">
        <div class="character-tag" data-position="right">
        </div>
    </div>
</div>

相关css：

#hud {
    position: relative;
    width: 100%;
}

.character-position {
    position: absolute;
    width: 65%;
}

#character-position-1 {
    left: 0%
}

#character-position-2 {
    left: 39%
}

.character-tag {
    position: absolute;
    width: 22%;
}

还有 javascript（都在 jQuery 就绪函数中）：

$(window).resize(resizeLocationComponent);

function resizeLocationComponent() {
        var windowWidth = $(window).width();
        $('#hud').css('height', ((windowWidth - 8) * 0.5625) + 'px');
        positionHudElements();
    }

positionHudElements = function() {
            var windowWidth = $(window).width();
            $characterPositions = $('.character-position.active');
            $.each($characterPositions, function(index) {
                var $tag = $(this).find('.character-tag');

                console.log("character position of "+$(this).attr('data-character-name')+" = "+$(this).css('left')+", "+$(this).css('top'));
                var percentX = parseInt($(this).css('left').replace('%', ''));
                var percentY = parseInt($(this).css('top').replace('%', ''));
                var windowHeight = windowWidth * 0.5625;
                var positionX = (percentX * windowWidth) / 100;
                var positionY = (percentY * windowHeight) / 100;
                var positionWidth = $(this).width();
                var tagWidth = $tag.width();
                var headSideOffset = parseInt(positionWidth * 0.35);
                console.log("windowWidth = "+windowWidth);
                console.log("character position of "+$(this).attr('data-character-name')+" = "+positionX+", "+positionY);

                console.log("characterPosition.width() = "+positionWidth);
                console.log("headSideOffset = "+headSideOffset);
                console.log("$tag.width() = "+tagWidth);
                var xOffset = 0;
                if ($tag.attr('data-position')=="left") {
                    xOffset = headSideOffset - tagWidth;
                    $tag.css('left', xOffset+'px');
                } else {
                    xOffset = headSideOffset - tagWidth;
                    $tag.css('right', xOffset+'px');
                }
                console.log("xOffset = "+xOffset);
            });

    }

在页面加载时也会调​​用 positionHudElements 函数，所以并不是说直到 resize 事件才会调用它。我可以看到在我的代码中调用该函数的位置，并且在刷新页面时可以从 positionHudElements 函数中看到控制台日志。

任何想法为什么 .width() 会在窗口调整大小之前返回 css 百分比，之后返回像素宽度？

谢谢。

Answer 1

检查此代码：

 function resizeLocationComponent() {
        var windowWidth = $(window).width();
      // $('#hud).css('height', ((windowWidth - 8) * 0.5625) + 'px');  You missed a inverted comma 
         $('#hud').css('height', ((windowWidth - 8) * 0.5625) + 'px');
        positionHudElements();
    }

你需要使用

$('#hud').css('height', ((windowWidth - 8) * 0.5625) + 'px');