Question

编辑：这是我的代码当前的样子。它仍然无法正常工作。

<head>
<script>
window.onload = myload()
var ids[]
function myload() { 
      alert("hi")
      ids = [document.getElementById('bs'),
        document.getElementById('cs'),
        document.getElementById('ds')
      ]

    }

function border(){
    ids[1].style.border = "9px";
}
</script>
</head>
<body> //elements definded here </body>

我正在尝试编写一个以一定间隔更改图像列表边界的函数。但是，我似乎无法使其工作。我正在尝试执行以下操作：

<head>
<script>
var ids = [document.getElementById('a'), 
           document.getElementById('b'), 
           document.getElementById('c')]

function(x){
    ids[x].border = "9px";
}
</script>
</head>
<body> //elements definded here </body>

但是它没有运行。但是，当我运行时：

document.getElementById('a').border = "9px"

它确实起作用。我猜我没有从数组中正确调用它。我在做什么错了？

编辑：在数组中固定两次“ a”。

Answer 1

JavaScript中的数组从0开始索引，因此执行ids[0].style.border = "9px";或ids[2].style.border = "9px";将为您带来所需的效果。您还需要访问元素上的style属性（我已经在代码中修复了该问题）

Answer 2

在函数（x）出现之前回答原始问题

[1]是b，因为JS数组从0开始。
我希望有style.border。
必须在对象渲染后定义数组。
如果您在具有id的元素之前的script标记中包含数组 a，b，c存在，那么您将获得等于 [undefined,undefined,undefined]

window.onload = function() { // or addEventHandler OR put script before </body>
  var ids = [document.getElementById('a'),
    document.getElementById('b'),
    document.getElementById('a')
  ]
  ids[1].style.border = "9px solid black"; // the second element
}

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

使用功能：

var ids=[]; // this is now global in scope

function setIt(idx) {
  ids[idx].style.border = "9px solid black";
}

window.onload = function() { // or addEventHandler OR put script before </body>
  ids = [document.getElementById('a'),
    document.getElementById('b'),
    document.getElementById('a')
  ]
  setIt(1);  // the second element
}

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>

修正代码

window.onload = myload; // removed ()
var ids=[]; // missing an equals

function myload() {
  alert("hi")
  ids = [document.getElementById('bs'),
    document.getElementById('cs'),
    document.getElementById('ds')
  ]
  border();
}

function border() {
  ids[1].style.borderWidth = "9px"; // just setting border is not enough
}

div { border: 1px solid red }

<div id="bs">A</div>
    <div id="cs">B</div>
    <div id="ds">C</div>

Javascript无法从数组中获取document.getElementById（'cs'）

2 个答案: