Question

我在html文件中有一些div元素：

<div id="pizza1" onclick="galery('pizza1')"></div>
<div id="pizza2" onclick="galery('pizza2')"></div>

我已经在外部.js文件中定义了函数，它不起作用（这意味着它没有做任何事情）。

function galery(var pizza) {
  document.getElementById(pizza).style.left = "10px;";
  document.getElementById(pizza).style.right = "10px;";
  document.getElementById(pizza).style.top = "10px;";
  document.getElementById(pizza).style.bottom = "10px;";
}

甚至可以在js中做类似的事情吗？

Answer 1

检查您的控制台，您可以看到错误：

未捕获的SyntaxError：意外的标记var

所以你只需从函数参数中删除var：

function galery(var pizza) {

应该是：

function galery(pizza) {

注意：将position更改为relative以查看更改。

希望这有帮助。

function galery(pizza) {
  var _this = document.getElementById(pizza);

  _this.style.left = "10px";
  _this.style.right = "10px";
  _this.style.top = "10px";
  _this.style.bottom = "10px";
  _this.style.position = "relative";
}

<div id="pizza1" onclick="galery('pizza1')">pizza 1</div>
<div id="pizza2" onclick="galery('pizza2')">pizza 2</div>

建议的解决方案using addEventListener：

document.getElementById('pizza1').addEventListener("click", galery, false);
document.getElementById('pizza2').addEventListener("click", galery, false);

function galery() {
  this.style.left = "10px";
  this.style.right = "10px";
  this.style.top = "10px";
  this.style.bottom = "10px";
  this.style.position = "relative";
}

<div id="pizza1">pizza 1</div>
<div id="pizza2">pizza 2</div>

Answer 2

您也可以使用以下代码执行此操作：

<div id="pizza1" onclick="galery(this)"></div>
<div id="pizza2" onclick="galery(this)"></div>

function galery(ctl) {
  ctl.style.left = "10px;";
  ctl.style.right = "10px;";
  ctl.style.top = "10px;";
  ctl.style.bottom = "10px;";
}

在函数括号内定义的定义变量＆＃39;在JS

2 个答案: