当前位置：首页 > jquery

jquery的css

2026-04-08 06:20:51jquery

jQuery 的 CSS 方法

jQuery 提供了 .css() 方法，用于获取或设置匹配元素的样式属性。该方法可以操作单个或多个 CSS 属性，支持链式调用。

获取 CSS 属性值

通过传递属性名作为参数，可以获取匹配元素中第一个元素的指定 CSS 属性值。返回的值是计算后的样式，可能包含浏览器添加的单位（如 px）。

// 获取元素的颜色属性
var color = $('div').css('color');

设置单个 CSS 属性

传递属性名和值作为参数，可以设置匹配元素的一个 CSS 属性。值可以是字符串或数字（数字会自动转换为像素值，除非属性本身支持其他单位）。

// 设置元素的背景颜色
$('div').css('background-color', 'red');

// 使用数字设置宽度（自动添加 px）
$('div').css('width', 200);

设置多个 CSS 属性

通过传递一个对象，可以一次性设置多个 CSS 属性。对象的键是 CSS 属性名，值是对应的样式值。

jquery的css

// 同时设置多个样式
$('div').css({
  'color': 'blue',
  'font-size': '16px',
  'border': '1px solid black'
});

注意事项

属性名可以使用 CSS 原生的格式（如 background-color）或驼峰式（如 backgroundColor）。
设置尺寸类属性（如 width、height）时，若值为数字，jQuery 默认添加 px 单位，除非属性本身不需要单位（如 z-index）。
获取属性值时，若元素集合为空或属性未设置，可能返回 undefined。

示例代码

// 获取并设置颜色
var currentColor = $('#myElement').css('color');
$('#myElement').css('color', 'green');

// 批量设置样式
$('.box').css({
  'margin': '10px',
  'padding': '20px',
  'background-color': '#f0f0f0'
});

通过 .css() 方法，可以灵活地动态修改页面元素的样式，适用于交互效果或响应式布局的实现。