根据标题名称更改样式

时间:2015-06-20 16:11:07

标签: javascript

我正在网站上工作,只需要显示一个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";
    }

3 个答案:

答案 0 :(得分:3)

您可以通过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.

答案 1 :(得分:0)

可以使用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";

答案 2 :(得分:-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