如何编写一个函数来改变文本和背景的颜色，以及通过单击按钮来改变p的文本？

Question

亲爱的大家，

我正在编写我的第一个网站，我希望有两个版本。遵循无障碍指南，一栋复杂，一栋普通/无障碍。

这意味着我需要从版本 1 更改为版本 2： a）语言/内容（因此我需要访问不同部分的p、h1、h2） b) 样式（所有部分的背景颜色、所有部分的颜色等）。

我的想法是使用一个带有点击事件功能的按钮，然后使用：

a) insideText 更改内容 b) addClasslist 创建一个具有我想要更改的特征（颜色等）的类列表。

我的第一次尝试是这样的：

导航的 HTML

<body class="complex">
  <header>
    <div class="content-wrapper">

<div class="topnav">
        <div class="languages">
        <a href="./Spanish/index.html" class="active">ES</a>
        <a href="./German/index.html" class="active">DE</a>
        <button class="accessible"><span class="easy"></span>Plain</button>
        </div>

        <!-- Navigation links (hidden by default) -->
        <div id="myLinks">
          <a href="#work">Projects</a>
          <a href="#skills">Skills</a>
          <a href="#about">About</a>
          <a href="#contact">Contact Me</a>
        </div>

        <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
          <i class="fa fa-bars"> <span class="menu"> Menu </span> </i>
        </a>
      </div>

JAVASCRIPT

const accessible = document.querySelector (".accessible");
const body = document.querySelector("complex");

accessible.addEventListener('click', () => body.classList.add('add-accessibility'));

这里如何访问innerText？

主体新类列表的 CSS (.complex)

.add-accessibility {
    color: #2b2c2c;
    background-color: #eae4dd;
}

到目前为止，这完全不起作用。当我单击按钮时，类列表不会按照我编写函数的方式添加到主体中。

您是否知道如何为内容和风格所需的所有这些更改编写工作函数？你知道我上面的想法有什么错误吗？为什么它甚至不添加班级列表？

我的另一个想法是使用带有 if/else 的函数。如果这可能是一个更好的选择，我也很高兴听到您的想法。

另一种选择可能是创建第二个 css 样式文档并通过单击按钮更改它，但如果我上面的功能不起作用，我仍然不知道如何访问 insideText。

提前非常感谢。

最好的，莎拉

Answer 1

给您一个如何使用

document.querySelector

和事件监听器的示例，以及

innerText

我在下面做了一个小例子。

首先，我定义要使用的变量，即要触发更改的按钮。我使用类似于 css 抓取内容的查询选择器来抓取它，html 元素的名称

button

并触摸标签名称是带有句点的类，导致

button.change

。

我向定义的按钮元素添加一个事件侦听器，并指定我正在等待单击。然后我传递一个匿名箭头函数作为每当我单击按钮时要执行的代码。

我首先切换类

"accessible-styles"

，这将更改我的页面的显示。然后，我检查该页面当前是否可以访问。

.contains

方法的结果将返回一个

bool

；如果包含，则

true

；如果不包含，则

false

。然后我可以使用条件语句。

我的条件语句是

if(isAccessible)

，这意味着如果

.contains

方法的结果是

true

，它将运行该代码块。下面的 else 关键字指定如果结果是

false

将会发生什么。

const button = document.querySelector("button.change");
const textField = document.querySelector(".changing-text");
const body = document.querySelector("body");

button.addEventListener("click", () => {
  body.classList.toggle("accessible-styles");
  const isAccessible = body.classList.contains("accessible-styles");
  if (isAccessible) {
    textField.innerText = "Accessible Styles!";
  } else {
    textField.innerText = "Base Styles!";
  }
});

body {
  background: lightblue;
  font-size: 20pt;
  color: hotpink;
}

.accessible-styles {
  background: white;
  color: black;
  font-size: 25pt;
  font-weight: bold;
}

button {
  font-size: inherit;
}

<div class="changing-text">
  Base Styles!
</div>
<button class="change">Change Things</button>

但是，可能还有其他更好的方法来实现您的目标。我想到了诸如“偏好对比媒体查询”之类的事情。此外，如果您采用媒体查询路线，您还可以在作为特定标记子级的 span 元素上使用 display: none 单独使用 css 更改文本内容。

好的语义 html 比大多数风格上的改变更强大——如果有人有屏幕阅读器，可以帮助布局更有意义。

如何编写一个函数来改变文本和背景的颜色，以及通过单击按钮来改变p的文本？

问题描述投票：0回答：1

1个回答

最新问题

如何编写一个函数来改变文本和背景的颜色，以及通过单击按钮来改变p的文本？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1