将多个 html 页面中的元素转换为 javascript答案

【问题标题】：Getting elements from multiple html pages into javascript将多个 html 页面中的元素转换为 javascript
【发布时间】：2021-03-13 07:42:58
【问题描述】：

我有两个名为 home.html 和 about.html 的 html 页面。我还有一个名为 main.js 的 js 文件，它与两个 html 页面链接。我在 home.html 中有一个带有“home”类的 div，在 about.html 中有另一个带有“about”类的 div . “home”类有一个文本，“about”类也有一个文本。现在我像这样在我的 main.js 文件中选择它们，

const home = document.querySelector('.home')
const about = document.querySelector('.about')

然后像这样操纵它们，

home.style.color = 'red'
about.style.color = 'green'

但问题只是变量 'home' 改变了它的颜色，而不是变量 '关于'

我认为可能有一种特殊的方法可以从多个页面中选择元素。但如果有请让我知道 bcz 变量 'about' 没有被任何东西操纵。

const home = document.querySelector('.home')
const about = document.querySelector('.about')

// Manipulated them like this
home.style.color = 'red'
about.style.color = 'green'

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ES8 Project</title>
  <link rel="stylesheet" href="main.css" /> </head>

<body>
  <div class="home"> HOME </div>
  <script src="main.js"></script>
</body>

</html>

【问题讨论】：

现在，about.html 在哪里？
在sn-p中也贴出JS文件
为什么要用JS来做CSS的工作？
啊，现在我明白了这个问题。您在两个页面上都有相同的脚本。该脚本不适用于 about.html，因为没有 .home 元素，并且尝试设置 null.style.color 会触发错误。当发生错误时，脚本的执行将停止，这就是为什么其他样式设置永远不会起作用的原因。在尝试访问它们的属性之前，您必须检查元素是否存在，例如if(home) {home.style.color = ...;}。或者可以选择将divs 的类名更改为更通用的名称，以便两个页面可以使用相同的代码（class="intro"）
我想现在我理解了这个问题，是时候解决这个问题了。

标签： javascript jquery-selectors dom-manipulation

【解决方案1】：

而不是：

<div class="home"> HOME </div>
<div class="about"> ABOUT </div>

您可以使用 自定义数据属性，例如 data-page:

<div data-page="home"> HOME </div>
<div data-page="about"> ABOUT </div>

然后，如果您想做一些比简单的 CSS 样式更动态的事情，您可以编写以下脚本：

const myDiv = document.querySelector('[data-page]');

switch (myDiv.dataset.page) {

  case ('home') : [... DO SOMETHING... ] ; break;
  case ('about') : [... DO SOMETHING... ] ; break;
}

注意在使用此设置时，如果您确实只想应用 CSS 样式，那么肯定使用 CSS：

[data-page="home"] {
  color: red;
}

[data-page="about"] {
  color: green;
}

进一步阅读：

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

【讨论】：

谢谢先生，我一定会试试的