如何访问变量中元素的类答案

【问题标题】：How to access the class of an element which is in variable如何访问变量中元素的类
【发布时间】：2021-03-04 14:45:38
【问题描述】：

我在变量中有一个 HTML 代码，我想访问它的类

var test = `
      <h2 class= "text">Hello
      </h2>`

这是我尝试访问属性类并更改颜色的原因

var query = document.querySelectorAll(".text")
document.getElementById(`${query}`).style.color= red;

我想访问<H2>标签的类并改变颜色。

有什么办法吗？

【问题讨论】：

为什么不先渲染测试然后改变颜色？
先尝试将test HTML 字符串添加到 DOM。我建议先删除<html>、<head> 和<body>，不仅因为body 不应该在head 中，还因为这些元素应该已经存在于DOM 中。跨度>
无论如何访问“class”属性并不是访问style 对象的方式。 query[0] 将是对您的 DOM 节点的引用，所以 query[0].style.color = "red";
真的不清楚这里有什么问题。你的 HTML 真的是在一个字符串中，而不是一个呈现的文档吗？
您似乎已经意识到您需要 h2 元素的类才能更改颜色。几个人一直试图得到答案的问题是，你为什么相信这一点？您想访问构成“文本”类的 CSS 规则并直接修改它们吗？或者您想将这个h2 元素的颜色更改为红色？或者您是否想遍历文档中具有“文本”类的每个元素并将颜色更改为红色？您的简短文本可以解释为这三个不同的请求。请edit澄清您的问题。

【解决方案1】：

如果您想在将字符串添加到 html 页面之前对其进行修改。

var test = `
      <h2 class= "text">Hello
      </h2>`

test = $(test).css("color", "red")

演示

var test = `
      <h2 class= "text">Hello
      </h2>`

test = $(test).css("color", "red")

$("body").append(test)

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

query 是一个数组，要获得第一个（唯一）一个，只需执行query[0].style.color = red; 它是一个数组的原因是因为document.querySelectorAll() 返回一个元素数组。 但元素必须在 DOM 中

【讨论】：

【解决方案3】：

现在更新我的答案，我意识到您的 HTML 是一个字符串。不知道你为什么这样做，但我离题了。

您只需在字符串中包含内联样式。

var test = `<html> 

  <head>
    <body>
      <h2 style="color: red;" class="text">Hello
      </h2>
    </body>
  </head>

</html>`

【讨论】：

为什么它们必须在字符串中包含样式才能获取类属性的值？
在更改答案之前，我向 OP 提供了 jQuery 选择器代码来更改颜色，但这不是必需的。关于问题上下文的信息不多，因此假设 OP 只是希望最终结果具有红色样式，那么上述工作正常。
在我的问题中，我使用了一个变量并在其中包含 html 标签，现在该变量具有 html 代码，对吗？现在我想访问那个 "
变量中有一个代码我想访问该代码的类就是这样

变量中有一个代码我想访问该代码的类就是这样