[英]Change styles based on title name
I am working on a site and need to only show a div if the title = "something". 我在一个网站上工作,如果标题=“ something”,则只需要显示一个div。 I cannot seem to achieve it, I have tried jQuery and javascript, here is what I have now.
我似乎无法实现,我已经尝试了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";
}
You can get the title much more easily via document.title
. 您可以通过
document.title
轻松获得标题。
You're inventing a property here: 您要在这里发明一种物业:
document.getElementsByClassName("book-a-lane").elems[0]
// --------------------------------------------^^^^^
getElementsByClassName
returns a list, it doesn't have an elems
property. getElementsByClassName
返回一个列表,它没有elems
属性。 Also note that getElementsByClassName
isn't as well supported as querySelector
, which would be more useful here. 还要注意,
getElementsByClassName
不如querySelector
受到很好的支持,在这里更有用。
You can also simplify the code dramatically. 您还可以大大简化代码。
Here's an example: 这是一个例子:
document.querySelector(".book-a-lane").style.visibility =
document.title === "Frisco, TX" ? "visible" : "hidden";
querySelector
takes a CSS selector and returns the first matching element (or null
). querySelector
使用CSS选择器并返回第一个匹配元素(或null
)。 There's also querySelectorAll
, which returns a list of matching elements. 还有
querySelectorAll
,它返回匹配元素的列表。
You might want document.title.trim()
, but beware browser support for it. 您可能需要
document.title.trim()
,但要注意浏览器对此的支持。
The title
variable's value can be fetched with this: var title = document.title
. 可以使用以下方法获取
title
变量的值: var title = document.title
。
The line inside your if
statement is faulty because there's no such thing as visibility: block;
if
语句中的行有问题,因为没有visibility: block;
. 。 It's either
display: block;
它可以是
display: block;
or visibility: visible;
或
visibility: visible;
. 。
This is the semi-improved version: 这是半改进的版本:
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";
}
You don't need to use .elms
to access the elements. 您无需使用
.elms
即可访问元素。
You can even use the ?
您甚至可以使用
?
strategy to do a true/false switch: 进行正确/错误切换的策略:
document.getElementsByClassName("book-a-lane")[0].style.visibility = title == "Frisco, TX" ? "visible": "hidden";
Do you mean to do this? 你是说要这么做吗
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";
}
Notice the lack of elems
. 注意缺少
elems
。 getElementsByClassName
can be accessed with the array accessor directly. 可以使用数组访问器直接访问
getElementsByClassName
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.