根据标题名称改变样式
我正在一个网站上工作,如果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";
}
您是不是要这么做?
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
。
您可以通过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()
,但要注意浏览器对它的支持。
的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";
这引发Uncaught TypeError:无法读取未定义的属性'style' –
这很奇怪!如果规范改变了怎么办?所有使用数组索引访问器的网络应用程序都将被破坏! –
我敢肯定,这是我做错了 –
它抛出这个控制台:遗漏的类型错误:无法读取属性“0”未定义 –
对不起我编辑我的答案,我第一次写错了。 –
我不知道为什么它一直在控制台中抛出这个错误:未捕获TypeError:无法读取未定义的属性'style' –