1. 获取元素的CSS属性值:
var color = $('#myElement').css('color');
这将返回#myElement元素的color属性的值。
2. 设置元素的CSS属性值:
$('#myElement').css('color', 'red');
这将把#myElement元素的文本颜色设置为红色。
3. 设置多个CSS属性值:
$('#myElement').css({
'color': 'red',
'font-size': '20px',
'background-color': 'yellow'
});
这样可以同时设置多个CSS属性。
下面是一个完整的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery CSS 方法</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<style>
#myElement {
width: 200px;
height: 100px;
border: 2px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div id="myElement">这是一个元素</div>
<script>
// 获取并输出元素的高度和宽度
var height = $('#myElement').css('height');
var width = $('#myElement').css('width');
console.log('Height: ' + height + ', Width: ' + width);
// 设置元素的新高度和宽度
$('#myElement').css({
'height': '150px',
'width': '250px',
'background-color': 'lightblue'
});
</script>
</body>
</html>
在这个例子中,初始时div元素有一些CSS样式。然后,通过.css()方法获取并输出元素的高度和宽度,然后再通过.css()方法设置元素的新高度、宽度和背景颜色。
确保在使用jQuery之前引入jQuery库。
转载请注明出处:http://www.zyzy.cn/article/detail/12884/jQuery