根據標題名稱改變樣式

Question

我正在一個網站上工作，如果title =「something」，只需要顯示一個div。我似乎無法實現它，我試過jQuery和JavaScript，這裏是我現在擁有的。

var title = document.getElementsByTagName("title")[0].innerHTML; 
    console.log(title); 
    document.getElementsByClassName("book-a-lane").elems[0].style.visibility=  "hidden"; 
    if(title === "Frisco, TX"){ 
    document.getElementsByClassName("book-a-lane").elems[0].style.visibility= "block"; 
    } 

Answer 1

您是不是要這麼做？

var title = document.getElementsByTagName("title")[0].innerHTML; 

document.getElementsByClassName("book-a-lane")[0].style.visibility="hidden"; 

if(title === "Frisco, TX"){ 
    document.getElementsByClassName("book-a-lane")[0].style.visibility= "block"; 
} 

注意缺少elems。可以直接使用數組訪問器訪問getElementsByClassName。

Answer 2

您可以通過document.title更容易地獲得標題。

你在這裏發明了一個屬性：

document.getElementsByClassName("book-a-lane").elems[0] 
// --------------------------------------------^^^^^ 

getElementsByClassName返回一個列表，它不具有elems財產。還請注意，getElementsByClassName不如querySelector那樣受到支持，這在這裏會更有用。

您還可以大幅簡化代碼。

下面是一個例子：

document.querySelector(".book-a-lane").style.visibility = 
    document.title === "Frisco, TX" ? "visible" : "hidden"; 

querySelector需要CSS選擇並返回第一匹配元件（或null）。還有querySelectorAll，它返回匹配元素的列表。

您可能需要document.title.trim()，但要注意瀏覽器對它的支持。

Live example when it matches.

Live example when it doesn't.

Answer 3

的title變量的值可以用這個來獲取：var title = document.title。

您的if聲明中的行是錯誤的，因爲沒有visibility: block;之類的東西。它可以是display: block;或visibility: visible;。

這是半改良版：

var title = document.title; 
document.getElementsByClassName("book-a-lane")[0].style.visibility = "hidden"; 
if (title == "Frisco, TX") { 
    document.getElementsByClassName("book-a-lane")[0].style.visibility = "visible"; 
} 

你並不需要使用.elms訪問的元素。

你甚至可以使用?策略做一個真/假開關：

document.getElementsByClassName("book-a-lane")[0].style.visibility = title == "Frisco, TX" ? "visible": "hidden";