文約 1 分鐘閱讀
Javascript HTML DOM href 屬性 | getElementById使用注意事項
分類文
標籤#javascript
語法：Javascript 可使用下方法更換HTML a連結標屬性。
anchorObject.href=URL
實例：
<html>
<head>
<script type="text/javascript">
function changeLink()
{
document.getElementById('myAnchor').innerHTML="W3School";
document.getElementById('myAnchor').href="http://www.w3school.com.cn";
document.getElementById('myAnchor').target="_blank";
}
</script>
</head>
<body>
<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>
<input type="button" onclick="changeLink()" value="Change link">
</body>
</html>
使用document.getElementById時需要特別注意，您需HTML標籤的ID要先產生，再去執行document.getElementById，不然會出現如的**TypeError: null is not an object (evaluating 'document.getElementById('myAnchor').href="http://www.w3school.com.cn"')**的錯誤。
使用下列方法先在HTML還沒產生前呼叫changeLink()就會出現錯誤。
{googleads center}
<html>
<head>
<script type="text/javascript">
function changeLink()
{
document.getElementById('myAnchor').innerHTML="W3School";
document.getElementById('myAnchor').href="http://www.w3school.com.cn";
document.getElementById('myAnchor').target="_blank";
}
changeLink();
</script>
</head>
<body>
<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>
</body>
</html>
或是使Javascript在Html之後與onClick之後再執行，就不會出現getElementById錯誤訊息。
<html>
<head>
</head>
<body>
<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>
<script type="text/javascript">
function changeLink()
{
document.getElementById('myAnchor').innerHTML="W3School";
document.getElementById('myAnchor').href="http://www.w3school.com.cn";
document.getElementById('myAnchor').target="_blank";
}
changeLink();
</script>
</body>
</html>