js css

// JavaScript 示例代码：简单的按钮点击事件

// 获取 HTML 中的按钮元素
const button = document.querySelector('button');

// 为按钮添加点击事件监听器
button.addEventListener('click', function() {
    // 当按钮被点击时，弹出一个提示框
    alert('按钮被点击了！');
});

// CSS 示例代码：简单的样式设置

/* 
选择所有的按钮元素，并设置它们的背景颜色为蓝色，文字颜色为白色，
并且当鼠标悬停在按钮上时，背景颜色变为深蓝色。
*/
button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: darkblue;
}

解释说明：

• JavaScript 部分：

  • 使用 document.querySelector 来选择页面中的按钮元素。
  • 使用 addEventListener 方法为按钮添加一个点击事件监听器。当用户点击按钮时，会触发 alert 函数，弹出一个提示框。

• CSS 部分：

  • 使用选择器 button 来选择所有的按钮元素，并为它们设置了背景颜色、文字颜色、内边距等样式。
  • 使用伪类 :hover 来定义当鼠标悬停在按钮上时的样式变化。