Question

我想更改html页面的span元素中文本的颜色，字体大小和字体粗细。

我使用以下代码：

if(window.location.href.indexOf("test") > -1){
    var search_span = document.getElementsByClassName("securitySearchQuery");
    search_span[0].style.color = "blue";
    search_span[0].style.fontWeight = "bold";
    search_span[0].style.fontSize = "40px";
}

以下是我的html页面的代码

<h1 class="keyword-title">Search results for<span class="securitySearchQuery"> "hi".</span></h1>

我想通过id获取元素但不幸的是它们只有类和没有id。我没有权限更改html代码，只是将js代码添加到外部网站。

我试图查看其他stackoverflow帖子，但可以找到解决方案。我是js和css的新手，请告诉我哪里出错了。

Answer 1

将<script>添加到<body>的底部，或在this StackOverflow question之后为DOMContentLoaded添加事件监听器。

如果该脚本在代码的<head>部分中执行，document.getElementsByClassName(...)将返回一个空数组，因为尚未加载DOM。

您收到Type Error，因为您引用了search_span[0]，但search_span[0]是undefined。

当您在Dev Tools中执行它时，这是有效的，因为DOM已经加载。

Answer 2

它目前正在运行，我刚刚更改了运营商 > ，以便在代码段中工作，看看：

window.onload = function() {

  if (window.location.href.indexOf("test") <= -1) {
    var search_span = document.getElementsByClassName("securitySearchQuery");
    search_span[0].style.color = "blue";
    search_span[0].style.fontWeight = "bold";
    search_span[0].style.fontSize = "40px";

  }

}

<h1 class="keyword-title">Search results for<span class="securitySearchQuery"> "hi".</span></h1>

无法阅读属性＆＃39; style＆＃39;未定义 - 未捕获的类型错误

2 个答案: