JQuery-JavaScript代码库-与CSS的联动篇—我耀学IT
// 假设我们有一个按钮和一个元素,当按钮被点击时,元素的颜色会改变
// HTML 结构
// <button id="change-color-button">改变颜色</button>
// <div id="color-box"></div>
// CSS 样式
// #color-box {
// width: 100px;
// height: 100px;
// background-color: blue;
// }
// JavaScript 部分
$(document).ready(function() {
// 当按钮被点击时,改变颜色
$('#change-color-button').click(function() {
$('#color-box').css('background-color', 'red');
});
});
// 这段代码展示了如何使用jQuery库来改变一个元素的CSS样式。当用户点击按钮时,关联的函数会被触发,并将一个元素的背景色改变为红色。
这段代码展示了如何使用jQuery库来改变一个元素的CSS样式。当用户点击按钮时,关联的函数会被触发,并将一个元素的背景色改变为红色。这是一个非常基础的例子,但它清楚地展示了如何将JavaScript、jQuery和CSS结合起来,以创建动态的网页界面。
评论已关闭