欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery 样式操作||操作 css 方法/设置类样式方法

发布时间：2025/4/16 编程问答 37 豆豆
生活随笔 收集整理的这篇文章主要介绍了 jQuery 样式操作||操作 css 方法/设置类样式方法 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

操作 css 方法

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="jquery.min.js"></script><style>div {width: 200px;height: 200px;background-color: pink;}</style> </head><body><div></div><script>// 操作样式之css方法$(function() {console.log($("div").css("width"));// $("div").css("width", "300px");// $("div").css("width", 300);// $("div").css(height, "300px"); 属性名一定要加引号$("div").css({width: 400,height: 400,backgroundColor: "red"// 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号})})</script> </body></html>

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 150px;height: 150px;background-color: pink;margin: 100px auto;transition: all 0.5s;}.current {background-color: red;transform: rotate(360deg);}</style><script src="jquery.min.js"></script> </head><body><div class="current"></div><script>$(function() {// 1. 添加类 addClass()// $("div").click(function() {// // $(this).addClass("current");// });// 2. 删除类 removeClass()// $("div").click(function() {// $(this).removeClass("current");// });// 3. 切换类 toggleClass()$("div").click(function() {$(this).toggleClass("current");});})</script> </body></html>

总结

以上是生活随笔为你收集整理的jQuery 样式操作||操作 css 方法/设置类样式方法的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。