当前位置：首页 > jquery

jquery css

2026-04-07 20:14:44jquery

jQuery 操作 CSS 的方法

jQuery 提供了多种方法来操作元素的 CSS 样式，包括获取、设置、添加和删除样式。以下是常用的 jQuery CSS 操作方法：

获取 CSS 属性值

使用 css() 方法可以获取指定元素的 CSS 属性值。语法如下：

var value = $('selector').css('propertyName');

示例：

var color = $('#myElement').css('color');
console.log(color); // 输出元素的颜色值

设置 CSS 属性值

通过 css() 方法可以设置单个或多个 CSS 属性。语法如下：

$('selector').css('propertyName', 'value');

示例：

$('#myElement').css('color', 'red'); // 设置文字颜色为红色

设置多个 CSS 属性

可以传递一个对象来同时设置多个 CSS 属性。语法如下：

$('selector').css({
    'property1': 'value1',
    'property2': 'value2'
});

示例：

$('#myElement').css({
    'color': 'blue',
    'font-size': '20px',
    'background-color': 'yellow'
});

添加和移除 CSS 类

jQuery 提供了 addClass() 和 removeClass() 方法来动态添加或移除 CSS 类。语法如下：

$('selector').addClass('className'); // 添加类
$('selector').removeClass('className'); // 移除类

示例：

$('#myElement').addClass('highlight'); // 添加高亮类
$('#myElement').removeClass('highlight'); // 移除高亮类

切换 CSS 类

toggleClass() 方法可以在元素上切换 CSS 类的存在状态。语法如下：

$('selector').toggleClass('className');

示例：

$('#myElement').toggleClass('active'); // 切换 active 类

获取和设置元素宽度和高度

jQuery 提供了专门的方法来获取和设置元素的宽度和高度：

width() 和 height()：获取或设置内容区域的宽度和高度。
innerWidth() 和 innerHeight()：包括内边距（padding）。
outerWidth() 和 outerHeight()：包括内边距和边框（border）。

示例：

var width = $('#myElement').width(); // 获取宽度
$('#myElement').height(200); // 设置高度为 200px

实际应用示例

以下是一个完整的示例，展示如何通过 jQuery 动态修改元素的 CSS：

jquery css

<!DOCTYPE html>
<html>
<head>
    <title>jQuery CSS 示例</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: lightgray;
            margin: 20px;
        }
        .highlight {
            background-color: yellow;
            border: 2px solid red;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="box" id="myBox">点击我</div>
    <script>
        $(document).ready(function() {
            $('#myBox').click(function() {
                $(this).css('color', 'blue'); // 设置文字颜色
                $(this).toggleClass('highlight'); // 切换高亮类
                $(this).height(150); // 修改高度
            });
        });
    </script>
</body>
</html>