DOM元素样式操作viscode版本实验,要求点击按钮“点我一下”,改变button的字体大小和背景颜色,复合这些要求的详细代码
时间: 2024-09-06 09:07:58 浏览: 74
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
在进行DOM元素样式操作的实验时,可以使用JavaScript来完成这个需求。以下是一个简单的HTML和JavaScript代码示例,实现点击按钮后改变按钮自身的字体大小和背景颜色的功能:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM样式操作实验</title>
<script>
function changeStyle() {
// 获取按钮元素
var button = document.getElementById("myButton");
// 改变按钮的字体大小和背景颜色
button.style.fontSize = "24px"; // 设置字体大小为24像素
button.style.backgroundColor = "#ff0000"; // 设置背景颜色为红色
}
</script>
</head>
<body>
<!-- 创建一个按钮元素 -->
<button id="myButton" onclick="changeStyle()">点我一下</button>
</body>
</html>
```
在这段代码中,首先定义了一个`changeStyle`函数,该函数被绑定到id为`myButton`的按钮的点击事件上。当按钮被点击时,函数会被触发。在`changeStyle`函数内部,我们通过`document.getElementById("myButton")`获取到按钮元素,并直接通过修改其`style`属性来改变字体大小和背景颜色。
阅读全文