getElementById（）的Javascript速记语法不起作用

Question

I've found an answer to a previous question about javascript short hand for this https://stackoverflow.com/a/6398848/1406888 but it is not working for me. I don't understand it because when I use the same short hand in the firefox developer's console it works.

Here's a short example of the code I'm using

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

The only one that works is the list1 border. The other ones fail. Can somebody please correct me.

I now have a working template. Here is my code:

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

Just so I get this straight. There is not substitute for getElementById??? I thought it was an interchangable short-hand, but in my example it only works with the .css property of the JQuery shorthand.

Answer 1

Sometimes when I just want to be able to use the $ as a shorthand for document.getElementById without actually requiring the functions of major javascript libraries, I'll just toss this in the page:

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

Saves a ton of typing.

Answer 2

You need to have some library to provide this shortcut (like jQuery). It is not built into the core language or your browser.

Also, for jQuery, it would be $('#list3') (you can use all kinds of selectors, not just the node id).

Answer 3

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

Answer 4

The syntax that you have described here requires the jQuery javascript library. You have to download and import the library, or link directly to the jQuery code bank in your HTML before this will work. Add the following line to the top of the head in your HTML file:

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

Answer 5

append jquery library, $ is not in the core functionality --

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

OR if your hard to JS then do it in this way----

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: you need to do it like this in jquery

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

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

and make sure in jquery you add # with Id if you are accessing an element with id.

Answer 7

Try setting the border style using the jquery css method.

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