JavaScript设计网页

最新推荐文章于 2024-09-02 17:34:07 发布

骑上单车去旅行

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量227

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/qq_46366184/article/details/141824761

版权

以下是一个使用JavaScript设计网页的示例案例：

<!DOCTYPE html>
<html>
<head>
<title>JavaScript设计网页</title>
<style>
#content {
  text-align: center;
  padding: 20px;
}

h1 {
  color: blue;
}

#btn {
  background-color: green;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
}
</style>
</head>
<body>
<div id="content">
  <h1>欢迎访问JavaScript设计网页</h1>
  <button id="btn">点击这里</button>
</div>

<script>
// 获取按钮元素
var btn = document.getElementById("btn");

// 按钮点击事件处理程序
btn.onclick = function() {
  // 修改h1元素的文字颜色为红色
  var h1Elem = document.querySelector("h1");
  h1Elem.style.color = "red";
  
  // 修改按钮的文字内容
  btn.innerHTML = "已点击";
  
  // 弹出提示框
  alert("按钮被点击了!");
}
</script>
</body>
</html>

这个案例中，我们在HTML中使用JavaScript来设计网页。当点击按钮时，我们会改变h1元素的文字颜色为红色，修改按钮的文字内容为"已点击"，并弹出一个提示框。