根據標題名稱更改樣式

Question

我在一個網站上工作，如果標題=“ 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

您可以通過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() ，但要注意瀏覽器對此的支持。

匹配時的實時示例。

沒有的實時示例。

Answer 2

可以使用以下方法獲取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";

Answer 3

你是說要這么做嗎

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 。