jQuery：css方法动态更改标签css样式

最新推荐文章于 2022-12-07 14:43:53 发布

wangzirui32

最新推荐文章于 2022-12-07 14:43:53 发布

阅读量695

点赞数

分类专栏： jQuery JavaScript HTML 文章标签： jquery css

本文链接：https://blog.csdn.net/wangzirui32/article/details/115281052

版权

HTML 同时被 3 个专栏收录

21 篇文章 4 订阅

订阅专栏

JavaScript

10 篇文章 0 订阅

订阅专栏

jQuery

5 篇文章 0 订阅

订阅专栏

hello，大家好，我是wanzirui32，今天我们来学习如何使用jQuery的css方法，动态更改标签css样式。
开始学习吧！

读取标签的css样式

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script>
     $(document).ready(function(){ // 为按钮按下作准备
     	$("button").click(function(){ // 获取button标签 写入单击事件的处理
    		alert($("h1").css("background-color"));// 获取h1的css属性background-color
  		});
	 });
  </script>
</head>
<body>
  <h1 style="background-color:#ff0000">测试标题</h1>
  <button>返回h1的background-color属性</button>
</body>
</html>

在这段代码中，$(“h1”).css(“background-color”)是一个重点，它获取h1标签对象，并用css方法获取background-color属性的值。

设置标签的css样式

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script>
     $(document).ready(function(){ // 为按钮按下作准备
     	$("button").click(function(){ // 获取button标签 写入单击事件的处理
    		$("h1").css("background-color", "#00ff00"); // 修改p的css属性background-color
  		});
	 });
  </script>
</head>
<body>
  <h1 style="background-color:#ff0000">测试标题</h1>
  <button>修改h1的background-color属性</button>
</body>
</html>

其中，$(“h1”).css(“background-color”, “#00ff00”);把h1标签的background-color设置为了绿色。

给标签设置多个css属性

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script>
     $(document).ready(function(){ // 为按钮按下作准备
     	$("button").click(function(){ // 获取button标签 写入单击事件的处理
    		// 修改或添加多个css属性 都使用字典键值对的方式来写
    		$("h1").css({"background-color":"yellow","font-size":"300%"});
  		});
	 });
  </script>
</head>
<body>
  <h1 style="background-color:#ff0000">测试标题</h1>
  <button>修改h1的css属性</button>
</body>
</html>

在“$(“h1”).css({“background-color”:“yellow”,“font-size”:“300%”});”这段代码中，我们使用来字典键值对的方式添加多个css属性。

好了，今天的课程就到这里，再见！

wangzirui32

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery：css方法动态更改标签css样式

hello，大家好，我是wanzirui32，今天我们来学习如何使用jQuery的css方法，动态更改标签css样式。开始学习吧！学习目录读取标签的css样式设置标签的css样式给标签设置多个css属性读取标签的css样式<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/j
复制链接

扫一扫