3 页面有5个p段落，点击每个p段落的时候打印p段落内容和设置背景色红色，使用css函数和html函数

好的，以下是代码实现示例：

HTML部分：

<p id="p1" onclick="changeColor(this)">这是第一个段落。</p>
<p id="p2" onclick="changeColor(this)">这是第二个段落。</p>
<p id="p3" onclick="changeColor(this)">这是第三个段落。</p>
<p id="p4" onclick="changeColor(this)">这是第四个段落。</p>
<p id="p5" onclick="changeColor(this)">这是第五个段落。</p>

CSS部分：

.red {
  background-color: red;
}

JavaScript部分：

function changeColor(p) {
  console.log(p.textContent);
  p.classList.add("red");
}

说明：

1. 在 HTML 中，我们使用了 5 个 p 元素，并给每个元素设置了一个唯一的 id，以便在 JavaScript 中访问它们。

2. 在 CSS 中，我们定义了一个名为 .red 的类，用于设置元素的背景色为红色。

3. 在 JavaScript 中，我们定义了一个名为 changeColor 的函数，用于处理每个 p 元素的点击事件。该函数接受一个 p 元素作为参数，将 p 元素的文本内容打印到控制台中，并将 p 元素的类设置为 .red，从而将其背景色设置为红色。

4. 我们将该函数作为 onclick 事件处理程序传递给每个 p 元素，以便当用户单击某个元素时调用该函数。