使用Javascript從h1標籤動態更改頁面標題

首先，感謝您花時間閱讀此問題。真是一個偉大的社會堆棧溢出:)使用Javascript從h1標籤動態更改頁面標題

我需要改變基於包含在該網頁上的H1元素的文本頁面的標題標籤。

我一直在摸索，我已經找到了「document.title時」 JavaScript函數。我一直在玩弄它，試圖從我的H1級別的「Category-H1」元素中拉出文本。

<script type="text/javascript"> 
    document.title = document.getElementsByClassName("Category-H1"); 
</script>

然而，它只是設置頁面標題爲「[對象的HTMLCollection]」，這是我的理解是一個空值。 JS最好是這樣做嗎？我知道我的代碼是頂起來的，任何提示？

在此先感謝！ - 亞歷

編輯

我已被告知該行代碼返回集合對象，而不是一個字符串。它指向的代碼示例如下：

setTimeout(function() { document.title = "iFinity User Profile - " + document.getElementById("test").outerText; }, 1000);

但是，此代碼會生成一個頁面標題「iFinity User Profile - undefined」。我將該頁面上的h1元素設置爲「test」的id。

你'

[object HTMLCollection]不是一個空值 - 它是一個html元素集合的字符串表示，你需要選擇第一個元素，然後從中獲取內部html。

document.getElementsByClassName("Category-H1")[0].innerHTML

此外，請確保在文檔加載後執行此操作。您可以通過在文檔末尾添加腳本來完成此操作，也可以使其在主體的onload事件中運行。

2012-10-26 21:04:54 climbage

這就是它！它正在工作！ –

它正在將新標題加載到頁面中。我是否還需要將onload事件添加到正文？我知道這對搜索引擎並不是最佳的，但我想給它一個最好的機會。 –

html中的

這應該工作：

document.title = document.getElementsByClassName("Category-H1")[0].innerHTML;

的getElementsByClassName()函數返回元素（[object HTMLCollection]的集合，所以你需要把它弄出來的元素，我假設第一個

2012-10-26 21:01:43 andrux

我認爲你仍然缺少一塊。 – climbage

我看不到在哪裏，請您詳細說明一下嗎？ – andrux

哦，我看到它大聲笑我的不好 – andrux

一個更好的解決方案可能是以下幾點：

<script type="text/javascript"> 
 
document.title = document.getElementsByTagName("H1")[0].innerHTML 
 
</script>

這會從設置H1類保存。

2016-07-21 18:49:23 Tyler

這是非常接近的，但我發現 - 反正與Firefox的工作，當您使用的getElementsByTagName（「H1」），它給你一個數組，你已經認識。然而，它的工作原理更好用：

<script type="text/javascript"> 
    document.title = document.getElementsByTagName("H1").item(0).innerHTML; 
</script>

注意添加.item（0）.innerHTML的獲取元素，而不是[0] .innerHTML後。

2017-01-12 18:11:00

我不知道你是否有任何經驗，但另一個似乎很受歡迎的替代方案是使用jQuery。與前面的討論一樣，下面的代碼假設您有興趣獲取「H1」標籤或「Category-H1」類的第一個實例。這是重要的一點，因爲除非您定位「ID」屬性，否則您將獲得一組項目。

此代碼還假定您已經直接從您的網站或通過引用CDN實現了包含jQuery庫。

<script type="text/javascript"> 
    $(document).ready(function() { 
     document.title = $("H1")[0].innerText; 
    }); 
</script>

的$（文件）。就緒將調用它包圍的文檔對象模型（DOM）後，才完成加載功能，和之前瀏覽器的渲染引擎顯示網頁。

函數內部的內容將抓取「H1」標記的第一個實例的內部文本，並將該文本值分配給頭部分中文檔的標題標記。

我希望這會增加另一層幫助。

2017-08-17 17:23:18

相關問題

回答