Question

我找到了关于此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属性。

Answer 1

有时候当我只想使用$作为document.getElementById的简写而不实际需要主要javascript库的功能时，我只会在页面中抛出这个：

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

节省了大量的打字。

Answer 2

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

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

Answer 3

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

Answer 4

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

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

Answer 5

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

Answer 6

IMO：你需要在jquery

中这样做

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

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

并确保在jquery中，如果您正在访问带有id的元素，则使用Id添加#。

Answer 7

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

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

getElementById（）的Javascript简写语法不起作用

7 个答案: