从多个 html 页面获取元素到 javascript

Question

我有两个 html 页面，名为 home.html 和 about.html。我还有一个名为 main.js 的 js 文件，它与 html pages.I 都有一个 div 和 class 中的“home” =33=] 和另一个 div class about.html 中的“about”。 Class“home”有一个文本，class“about”有一个文本too.Now我在我的main.js文件中这样选择了它们，

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

并像这样操纵它们，

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

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

我认为可能有一种特定的方法可以从多个页面中获取 select 元素。但是如果有请告诉我 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>

Answer 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;
}

N.B. 使用此设置时，您 do 只想应用 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

从多个 html 页面获取元素到 javascript

Getting elements from multiple html pages into javascript

javascript

jquery-selectors

dom-manipulation