使用JQuery切换CSS可以通过以下步骤实现:
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<button id="toggleButton">Toggle CSS</button>
toggleClass
方法,可以添加或移除CSS类来切换样式。例如,可以创建一个名为"highlight"的CSS类来切换元素的背景颜色:$(document).ready(function() {
$('#toggleButton').click(function() {
$('body').toggleClass('highlight');
});
});
上述代码中,$(document).ready
用于确保文档加载完成后再执行JQuery代码。$('#toggleButton')
选中了id为"toggleButton"的按钮元素。.click
方法用于添加一个点击事件处理程序。$('body')
选中了整个文档的body元素。.toggleClass('highlight')
方法会添加或移除名为"highlight"的CSS类。
.highlight {
background-color: yellow;
}
上述CSS代码中,定义了名为"highlight"的CSS类,将背景颜色设置为黄色。
通过以上步骤,当点击按钮时,JQuery代码将会切换body元素的CSS类,从而改变背景颜色。
领取专属 10元无门槛券
手把手带您无忧上云