Question

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

我正在尝试建立一些嵌套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 ready函数中）：

$(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');

jQuery：.width（）返回css设置百分比，直到窗口调整大小，然后返回像素宽度。为什么？

1 个答案: