根据标题名称改变样式

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