jQuery 样式操作||操作 css 方法/设置类样式方法
生活随笔
收集整理的這篇文章主要介紹了
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 方法/设置类样式方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery 选择器 之 案例：淘宝服饰
- 下一篇： jQuery 效果——显示隐藏/滑动/淡