jQuery 操作 CSS 样式
在网页开发中,CSS 样式是决定页面外观的重要部分。而通过 jQuery,你可以非常方便地动态地修改元素的样式,实现交互效果和动态展示。本节将介绍如何使用 jQuery 操作元素的 CSS 样式,让你能够轻松地调整页面元素的外观。
我们会讲解以下几个常用方法:
.css()
:获取或设置元素的 CSS 样式- 动态添加/删除类
- 更改元素的多个 CSS 属性
掌握这些方法后,你就能在网页中实现更多的动态样式变化,提升用户体验。
获取和设置元素的样式
获取 CSS 样式
你可以使用 .css()
方法来获取某个元素的 CSS 样式。如果你只传递一个参数,它会返回该元素指定的 CSS 属性值。
示例:
<p id="text" style="color: red;">这是一个红色的段落</p>
<script>
var color = $('#text').css('color');
console.log(color); // 输出: red
</script>
在上面的示例中,我们通过 .css('color')
获取了 #text
元素的字体颜色。