3 页面有5个p段落,点击每个p段落的时候打印p段落内容和设置背景色红色,使用css函数和html函数
时间: 2024-02-22 11:57:48 浏览: 48
好的,下面是使用 jQuery 实现点击每个 p 段落时打印内容和设置背景色为红色的代码:
HTML 代码:
```
<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
<p>第四个段落</p>
<p>第五个段落</p>
```
jQuery 代码:
```
$("p").click(function() {
console.log($(this).text());
$(this).css("background-color", "red");
});
```
解释:
1. `$("p")` 选择所有的 p 元素。
2. `.click()` 给每个 p 元素添加点击事件。
3. `$(this).text()` 获取当前点击的 p 元素的文本内容,并使用 `console.log()` 函数打印出来。
4. `$(this).css("background-color", "red")` 设置当前点击的 p 元素的背景色为红色。
相关问题
页面有5个p段落,点击每个p段落的时候打印p段落内容和设置背景色红色,使用css函数和html函数
好的,为您提供代码如下:
HTML代码:
```
<p onclick="changeColor(this)">第一个p段落</p>
<p onclick="changeColor(this)">第二个p段落</p>
<p onclick="changeColor(this)">第三个p段落</p>
<p onclick="changeColor(this)">第四个p段落</p>
<p onclick="changeColor(this)">第五个p段落</p>
```
JavaScript代码:
```
function changeColor(element) {
var content = element.innerHTML; // 获取p段落内容
console.log(content); // 控制台输出p段落内容
element.style.backgroundColor = "red"; // 设置背景色为红色
}
```
当您点击每个p段落时,将会在控制台输出该段落的内容,并将背景色设置为红色。
页面有5个p段落,使用css函数和html函数点击每个p段落的时候打印p段落内容和设置背景色红色,
好的,为您提供代码如下:
HTML代码:
```
<p id="p1">第一个p段落</p>
<p id="p2">第二个p段落</p>
<p id="p3">第三个p段落</p>
<p id="p4">第四个p段落</p>
<p id="p5">第五个p段落</p>
```
JavaScript代码:
```
// 获取所有p段落元素
var pList = document.getElementsByTagName("p");
// 为每个p段落元素添加点击事件
for (var i = 0; i < pList.length; i++) {
pList[i].onclick = function() {
var content = this.innerHTML; // 获取当前p段落的内容
console.log(content); // 控制台输出p段落内容
this.style.backgroundColor = "red"; // 设置背景色为红色
}
}
```
当您点击每个p段落时,将会在控制台输出该段落的内容,并将背景色设置为红色。
阅读全文