Question

我有一个Javascript脚本，其目的是当窗口小于图像时使图像保持在窗口中心。它只是将图像向左移动图像宽度和窗口宽度之差的一半，这样图像的中心始终是屏幕的中心。当窗口不小于图像时，该左偏移量设置为零。如果我在IE或Firefox中，它的效果非常好。在webkit浏览器上，当窗口比图像宽时，它不会变为零，创建类似于float:right的效果。这是代码：

setTimeout(slideImageWidth, 1);
function slideImageWidth() {
    var slideWidth = window.getComputedStyle(document.getElementById("slide-image")).width,
        windowWidth = window.innerWidth,
        slide = document.getElementById("slide-image"),
        slideWidth = window.getComputedStyle(slide).width;
    if (windowWidth < (slideWidth.replace("px", "") + 1) && slide.style.display !== "none") {
        slide.style.left = ((((-slideWidth.replace("px", "") + windowWidth)) / 2) + "px");
    }
    else {
        slide.style.left = 0;
    setTimeout(slideImageWidth, 1);
};

我尝试将slide.style.left = 0放在if之前，然后让循环在下一毫秒内处理它，但那也没有用。我还尝试了两个展示位置：

slide.style.left = "0px";
slide.style.left = 0 + "px";
slide.style.left = "0" + "px";
slide.style.left = 0px;

其中没有一个在Chrome或Safari中有效，但除了最后一个在Firefox和IE中都有效之外。

当窗口宽于图像时使用alert(slide.style.left)时，Chrome和Safari会返回正值，这与Firefox和IE中的0不同，后者告诉我0值永远不会被写入slide.style.left。然而，我知道我可以修改slide.style.left因为它仍然基于等式定位自己。

为什么此代码不适用于webkit浏览器，我该如何解决？

Answer 1

首先，我认为是偶然错字的事情：

1）你的代码引用了名为＆＃34; slide1Width＆＃34;的东西，它是无处定义的。 2）你的代码引用了一个名为＆＃34; slide1＆＃34;的东西，它是无处定义的。 3）你没有合适数量的近括号，最后一个括号莫名其妙地有一个分号。

其次，最明显的错误不会导致您的特定问题：

(slideWidth.replace("px", "") + 1)

这个表达不是你想要的。如果slideWidth为＆＃34; 440px＆＃34;，则replace（）调用为您提供＆＃34; 440＆＃34;和（＆＃34; 440＆＃34; + 1）为字符串＆＃34; 4441＆＃ 34 ;.我不认为你在这里做的是什么。

第三，最后，我认为是你所询问的实际错误的原因：时机。如果您打开开发工具并在加载后在宽窗口上手动运行slideImageWidth（）并且无法居中，则图像实际上会跳转到中心，即使在Chrome上也是如此。为什么不在页面加载时这样做？这里：

window.getComputedStyle(slide).width

该表达式返回＆＃34; 0px＆＃34;在首次加载页面时。如果您等到图像加载完成后，您将能够获得它的实际宽度，在这种情况下，您可以进行所需的计算。（或者，假设您可以通过样式自己设置宽度。）似乎IE在运行脚本之前加载并流动图像，而Chrome则不然。

Answer 2

您是否有理由想使用setTimeout而不是resize事件？这样的事情怎么样：

window.onresize = function(event) {
    setSlidePosition();    
};

function setSlidePosition() {
    var slideLeft = (document.getElementById("slide-image").style.left.indexOf('px') != -1 ) ? document.getElementById("slide-image").style.left : '0px';

    var numLeft = slideLeft.replace('px','');

    console.log(numLeft);

    var element = document.getElementById("slide-image")

    if(element.width > window.innerWidth) {
        var newLeft = (element.width - window.innerWidth) / 2 * -1 + "px";
        document.getElementById("slide-image").style.left = newLeft;
    } else {
        document.getElementById("slide-image").style.left = "0px";
    }
};

setSlidePosition();

http://jsfiddle.net/4qomq7tb/45/

似乎至少在chrome和FF中表现相同。但是，这并未具体回答与您的代码相关的问题：/

Javascript定位无法在Chrome或Safari中使用

2 个答案: