1、操作css样式
(1)返回css样式属性的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div { 300px; height: 300px; background-color: darkred; } </style> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> </head> <body> <div></div> <script> $(function() { console.log($("div").css("width")); }) </script> </body> </html>
只写了css的属性名的情况下只返回属性值
(2)修改属性的值
<body> <div></div> <script> $(function() { $("div").css("width","100px"); console.log($("div").css("width")); }) </script> </body>
- 属性名必须加引号,不加引号会当做变量处理
- 属性的值如果是数字可以不加引号
(3)一次修改多个css的样式(对象的方式)
<body> <div></div> <script> $(function() { $("div").css({ 200, height:200 }) }) </script> </body>
2、设置样式的方法
作用等同于classList,可以操作类样式,注意操作里面的类样式不要加点
(1)添加类
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div { 300px; height: 300px; } .back_color{ background-color: darkred; } </style> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> </head> <body> <div></div> <script> $(function() { $("div").click(function(){ $(this).addClass("back_color"); }) }) </script> </body> </html>
(2)删除类
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div { 300px; height: 300px; background-color: aqua; } .back_color{ background-color: darkred; } </style> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> </head> <body> <div class="back_color"></div> <script> $(function() { $("div").click(function(){ $(this).removeClass("back_color"); }) }) </script> </body> </html>
(3)切换类
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div { 300px; height: 300px; background-color: aqua; } .back_color{ background-color: darkred; } </style> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> </head> <body> <div class="back_color"></div> <script> $(function() { $("div").click(function(){ $(this).toggleClass("back_color"); }) }) </script> </body> </html>