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

【问题标题】：Javascript shorthand syntax for getElementById() not workinggetElementById() 的 Javascript 速记语法不起作用
【发布时间】：2012-06-28 12:02:09
【问题描述】：

我已经找到了有关此https://stackoverflow.com/a/6398848/1406888 的 JavaScript 速记的先前问题的答案，但它不适用于我。我不明白，因为当我在 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 属性。

【问题讨论】：

添加 jquery 库并将此代码用于最后一行
当人们在问题中没有提及 jQuery 答案时，这是问题的一部分。答案是题外话，并且让新开发人员感到困惑。这个答案不是使用原生 API，而是使用 JavaScript 库。

标签： javascript syntax shorthand

【解决方案1】：

您在此处描述的语法需要jQuery javascript 库。您必须下载并导入库，或直接链接到 HTML 中的 jQuery 代码库，然后才能使用。将以下行添加到 HTML 文件的顶部：

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

【讨论】：

【解决方案2】：

尝试使用 jquery css 方法设置边框样式。

<script type="text/javascript">
  $(document).ready(function(){
    $("#list2").css("border-style","solid");
  });
</script>

【讨论】：

【解决方案3】：

IMO：你需要在 jquery 中这样做

$("#list2").css("border-Style","solid")

$("#list3").css("border-Style","solid")

并确保在 jquery 中添加带有 ID 的 #，如果您正在访问具有 id 的元素。

【讨论】：

是的，我明白了...我需要包含 jquery 并且必须使用该格式。我认为我已经看到 $('#list2') 直接用于 getElementById 方法。这不是真的吗？

【解决方案4】：

追加jquery库，$不在核心功能中--

<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";

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

</script>

或者如果你对 JS 比较难，那么就这样吧----

var testId1 = document.getElementById("list1");
var testId2 = document.getElementById("list2");
var testId3 = document.getElementById("list3");
testId1.style.borderStyle="solid";
testId2.style.borderStyle="solid";
testId3.style.borderStyle="solid";

【讨论】：

我尝试复制您的行以包含 jquery 源代码，但它仍然无法正常工作。

【解决方案5】：

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

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

节省大量输入。

【讨论】：

稍后可能会让人感到困惑，因为您的$('div') 会做一些不同于 jQuery 的事情（它需要 #）。如果你想最终包含一个库，最好让它向上兼容。
非常聪明，但我仍然想知道为什么我的不能正常工作，因为我看到其他人使用它没有问题。

【解决方案6】：

您需要在页面中包含 JQuery 才能使用此表示法。

【讨论】：

【解决方案7】：

你需要一些库来提供这个快捷方式（比如 jQuery）。它没有内置在核心语言或您的浏览器中。

另外，对于 jQuery，它将是 $('#list3')（您可以使用各种选择器，而不仅仅是节点 ID）。

【讨论】：