jQuery 是一个快速、简洁的JavaScript 库，广泛应用于Web前端开发中。在jQuery 中，改变 CSS 样式是一项非常基础的操作。本文将详细介绍如何使用jQuery 改变CSS样式的基础代码。
下面是一些实例，说明如何利用jQuery 中的函数改变网页的CSS 样式。
基础代码
首先，引用jQuery 库：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
然后，我们可以利用以下基础代码改变CSS 样式：
$(selector).css(property,value)
其中，selector 指定要改变样式的元素，property 指定要改变的CSS 属性，value 指定要设置的CSS 属性值。
下面介绍几个实例。
示例一
改变元素背景颜色：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 改变CSS样式示例1</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "yellow");
});
});
</script>
</head>
<body>
<h2>jQuery 改变CSS样式示例1</h2>
<p>点击按钮改变背景色。</p>
<button>更改颜色</button>
</body>
</html>
在这个实例中，我们将点击按钮后 p 元素的背景颜色更改为黄色。具体代码实现的过程如下：
- 在文档加载完成后，给按钮添加单击事件。
- 单击按钮后，使用
css()函数将p元素的background-color属性改变为yellow。
示例二
改变元素样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 改变CSS样式示例2</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
});
</script>
</head>
<body>
<h2>jQuery 改变CSS样式示例2</h2>
<p>点击按钮改变样式。</p>
<button>更改颜色</button>
</body>
</html>
在这个实例中，我们将点击按钮后 p 元素的样式改变。具体代码实现的过程如下：
- 在文档加载完成后，给按钮添加单击事件。
- 单击按钮后，使用
css()函数将p元素的background-color和font-size属性改变为对应的值，即yellow和200%。
通过这些示例，我们可以看到，使用jQuery 改变CSS 样式的代码非常简单，只需要利用 css() 函数即可。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery 改变CSS样式基础代码 - Python技术站
微信扫一扫 
支付宝扫一扫 