Question

我正在尝试创建一个javascript函数，将图像裁剪并居中于1000px。为此，我取宽度，减去1000，除以2，然后乘以-1。然后我取这个值并将其分配给margin-left和margin-right。我把它设置为在页面加载时运行。出于某种原因，它没有执行我的第一行代码。看看下面。（调试警报用于调试目的）

的Javascript

function crop()
{
alert("debug")
width = document.getElementById(slide).width
alert("debug")
width = -1((width - 1000)/2)
alert("debug")
document.getElementById(slide).setAttribute("style","margin-left" + width + "px")
alert("debug")
document.getElementById(slide).setAttribute("style","margin-right" + width + "px")
alert("debug")
}

这是我试图将其应用于所有这些的元素。

元素的

<div id="mySlides" style="width:1000px; overflow:hidden;">
<img src="img/1.jpg" onclick="slideshow()" id="slide" />
</div>

如您所见，它仅显示第一个调试警报，并且在此之后不显示任何其他内容。有人可以解释为什么它忽略了其余的代码吗？

Answer 1

slide是对名为slide的变量的引用。您可能需要"slide"（字符串），因为img元素有id="slide"。

您应该花一些时间熟悉浏览器的调试工具（alert()是一种可怕的调试方式）。它会指出......

ReferenceError：幻灯片未定义

Answer 2

您在字符串周围缺少分隔符：

width = document.getElementById("slide").width;

您在这里缺少乘法运算符：

width = -1 * ((width - 1000)/2);

你缺少字符串分隔符和样式声明中的冒号，你也必须把样式放在一起，否则第二个会覆盖第一个：

document.getElementById("slide").setAttribute("style","margin-left:" + width + "px;margin-right:" + width + "px");

Javascript函数在某一行后停止

2 个答案: