function//要求1 使用style属性设置p标签的背景颜色设置为红色 //要求2 提前写好类样式 设置p的字体大小为48像素 字体颜色为白色 //当用户光标悬浮到p元素 应用此类样式 //当用户光标从p元素上移除 删除此类样式
时间: 2023-09-14 22:07:15 浏览: 52
这是一段 JavaScript 代码,它实现了以下要求:
1. 使用style属性设置p标签的背景颜色为红色。
2. 提前定义了一个名为hover的类样式,设置了p标签的字体大小为48像素,字体颜色为白色。
3. 当用户鼠标悬浮到p元素上时,应用hover类样式。
4. 当用户鼠标移出p元素时,删除hover类样式。
具体实现代码如下:
```
const p = document.querySelector('p');
// 设置p标签的背景颜色为红色
p.style.backgroundColor = 'red';
// 定义名为hover的类样式
const hoverStyle = `
font-size: 48px;
color: white;
`;
// 当用户光标悬浮到p元素时,应用hover类样式
p.addEventListener('mouseover', function() {
p.style.cssText += hoverStyle;
});
// 当用户光标从p元素上移除时,删除hover类样式
p.addEventListener('mouseout', function() {
p.style.cssText = '';
});
```
解释如下:
1. 使用document.querySelector方法获取HTML页面中第一个p元素,并将其赋值给变量p。
2. 使用p.style.backgroundColor属性将p标签的背景颜色设置为红色。
3. 定义了一个名为hoverStyle的常量,值为一个字符串,其中包含了hover类样式的CSS代码。
4. 使用p.addEventListener方法为p元素添加mouseover事件和mouseout事件。当用户鼠标悬浮到p元素上时,调用匿名函数并在其中使用p.style.cssText属性将hover类样式添加到p元素中。当用户鼠标移出p元素时,调用匿名函数并在其中使用p.style.cssText属性将p元素的样式重置为空字符串,从而删除hover类样式。