Javascript定位在Chrome或Safari中不起作用

Javascript positioning not working in Chrome or Safari

本文关键字：Safari 不起作用 Chrome 定位 Javascript      更新时间：2023-09-26

我有一个用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浏览器，我该如何修复它？

首先，我认为是意外拼写错误的东西：

1） 您的代码引用了一个名为"slide1Width"的东西，它在任何地方都没有定义。2） 您的代码引用了一个名为"slide1"的东西，它在任何地方都没有定义。3） 你没有正确的右括号数量，最后一个括号后面莫名其妙地有一个分号

第二，最明显的错误不会导致你的特定问题：

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

这个表达式不是你想要的。如果slideWidth是"440px"，那么replace（）调用会给出"440"，（"440"+1）是字符串"4441"。我不认为这是你在这里的意思。

第三，也是最后一点，我认为是你所问的实际错误的原因：时间。如果你打开开发工具，在加载slideImageWidth（）后在一个宽窗口上手动运行它，但它无法居中，那么图像实际上会跳到中心，即使在Chrome上也是如此。为什么它不在页面加载时执行此操作？此处：

window.getComputedStyle(slide).width

该表达式在首次加载页面时立即返回"0px"。如果你等到图像加载完成，你就可以得到它的实际宽度，在这种情况下，你可以进行你想要的计算。（或者，大概你可以通过样式设置自己的宽度。）看起来IE在运行脚本之前加载并流动了图像，而Chrome则没有。

是否有理由使用setTimeout而不是调整大小事件？像这样的东西怎么样：

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上的表现是一样的。不过，这并没有具体回答与代码相关的问题：/

相关文章：