語法: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()就會出現錯誤。

 

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

 

您也可能喜歡這些文章

使用fullPage.js設計單頁式選單滑動區塊的全屏滾動網站

Demo | 官網 經常能見到單頁式使用選單滑動區塊的網站,我們稱為全屏滾動網站(也稱為單頁網站),尤其是國外網站。這些網站用幾幅很大的圖片或色塊做背景,再添加一些簡單的內容,顯得格外的高端大氣上檔次。比如iPhone 5C的介紹頁面(查看)。如果你也希望你的網站能設計成全屏的,顯得更上檔次,你可以試試fullPage.js。