怎么用jQuery轻松设置样式？

姚思瀚

2026-08-28 • 👁 0人浏览过

一、jQuery设置css样式

大家好，我是陆砚码，今天我们来聊聊如何用jQuery来动态设置元素的样式。

测试jQuery动态获取padding-left

首先，我们可以用 css()方法 来获取元素的样式属性。比如，想获取上面div的padding-left值，可以这样写：

$("div").css("padding-left");

接下来，我们可以直接用 css()方法 来设置样式。比如，想让上面的div文字变成黄色，可以这样操作：

$("div").css("color","yellow");

当然，我们也可以一次性设置多个样式。比如，想让div的背景变成黄色，字体放大两倍，可以这样写：

$("div").css({
    "background-color":"yellow",
    "font-size":"200%"
});

如果你需要一次性设置更多的样式，还可以这样写：

var css = {
    "background-color": '#EEE',
    "height": '500px',
    "margin": '10px',
    "padding": '2px 5px'
};
$("div").css(css);

怎么样，是不是很简单呢？这就是用jQuery来动态设置样式的方法。

好了，今天的内容就到这里。我们通过三个简单的步骤学会了如何用jQuery来设置元素的样式。如果你想要学习更多关于jQuery的知识，可以关注思享编程网（www.sxgpb.com），我会在这里分享更多的编程技巧和心得体会。

—— 陆砚码敬上