jQuery实现获取及设置CSS样式操作详解

获取CSS样式

可以使用jQuery的css()方法获取元素的CSS样式，语法如下：

$(selector).css(property);

其中，selector为选择器，指定要获取样式的元素，property为CSS属性名称，表示要获取的样式属性。

示例1：获取元素高度

HTML代码：

<div id="myDiv" style="height: 100px;"></div>

JavaScript代码：

var height = $('#myDiv').css('height');
console.log(height);

结果：

100px

示例2：获取颜色属性

HTML代码：

<h1 id="myH1" style="color: red;">Hello World</h1>

JavaScript代码：

var color = $('#myH1').css('color');
console.log(color);

结果：

rgb(255, 0, 0)

设置CSS样式

使用css()方法也可以设置元素的CSS样式，语法如下：

$(selector).css(property, value);

其中，selector为选择器，指定要设置样式的元素，property为CSS属性名称，表示要设置的样式属性，value为属性值。

示例3：设置元素背景颜色

HTML代码：

<div id="myDiv">Hello World</div>

JavaScript代码：

$('#myDiv').css('background-color', 'yellow');

将元素背景颜色设置为黄色。

示例4：设置元素宽度和高度

HTML代码：

<div id="myDiv">Hello World</div>

JavaScript代码：

$('#myDiv').css({
    'width': '200px',
    'height': '100px'
});

将元素宽度设置为200像素，高度设置为100像素。

以上是jQuery实现获取及设置CSS样式操作的详解，可以通过这些方法方便地获取和设置元素的CSS样式，从而实现更灵活的页面样式设计。