getElementById() 的 Javascript 速记语法不起作用

Question

我已经找到了之前有关 javascript 简写的问题的答案 https://stackoverflow.com/a/6398848/1406888但这对我不起作用。我不明白它，因为当我在 Firefox 开发者控制台中使用相同的简写时，它可以工作。

这是我正在使用的代码的简短示例

<div id="list1">
<li>pres</li>
<li>mike</li>
<li>camel</li>
<li>week</li>
</div>

<p></p>
<div id="list2">
<li>time</li>
<li class="test">era</li>
<li>people</li>
<li>life</li>
</div>

<p></p>
<div id="list3">
<li>time</li>
<li class="test">era</li>
<li>people</li>
<li>life</li>
</div>

<script type="text/javascript">

var testId = document.getElementById("list1");
testId.style.borderStyle="solid";
$("#list2").style.borderStyle="solid";

$("list3").style.borderStyle="solid";

</script>

唯一有效的是 list1 边框。其他的都失败了。有人可以纠正我吗？

我现在有了一个工作模板。这是我的代码:

<div id="list1">
<li>pres</li>
<li>mike</li>
<li>camel</li>
<li>week</li>
</div>

<p></p>
<div id="list2">
<li>time</li>
<li class="test">era</li>
<li>people</li>
<li>life</li>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

var testId = document.getElementById("list1");
testId.style.borderStyle="solid";
//$("#list2").style.borderStyle="solid";   this does not work
$("#list2").css("border-Style","solid");   this works.
</script>

只是为了让我明白这一点。 getElementById 没有替代品吗？？？我认为这是一个可互换的简写，但在我的示例中，它仅适用于 JQuery 简写的 .css 属性。

Answer 1

有时，当我只想能够使用 $ 作为 document.getElementById 的简写，而不实际需要主要 javascript 库的功能时，我会将其扔到页面中:

function $(a){return document.getElementById(a);}

节省大量打字时间。