<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Css样式操作</title> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 200px; background-color: red; } </style> </head> <body> <div id="box"></div> <button id="getStyle">获取样式</button> <button id="setStyle">设置样式</button> <script src="js/jquery-3.3.1.js"></script> <script> window.onload=function () { var $box=$("#box"); $("#getStyle").click(function () { var w =$box.css('width'); var h =$box.css('height'); var bg =$box.css('background-color'); console.log("宽度:"+w +"高度:"+h + "背景颜色:"+bg) }) $("#setStyle").click(function () { /* $box.css('width','200px'); $box.css('height','300px'); $box.css('background-color','pink');*/ /* $box.css('width','200px').css('height','300px').css('background-color','pink');*/ $box.css({ 'width':'200px', 'height':'300px', 'background-color':'pink' }) }) } </script> </body> </html>