JQ css操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> </title> <link rel="stylesheet" type="text/css" href="JQ_css.css"/> </head> <body> <div id="div1"> this is div </div> <div class="back" id="div2"> this is div2 </div> <button type="button" id="btn1">click</button><br> <p id="p1">this is p</p> <button type="button" id="btn2">click</button><br> <div id="div3" class="back"> </div> <button type="button" id="btn3">click</button><br> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="JQ_css.js"></script> </body> </html>
.back{ background-color: aqua; width: 200px; height: 200px; border: solid; }
$(document).ready(function(){ /** * 操作CSS */ //添加删除类 $("#btn1").click(function(){ // $("#div1").addClass("back"); // $("#div2").removeClass("back"); $("#div1").toggleClass("back"); }) //设置css $("#btn2").click(function(){ //返回css值 console.log($("#div2").css("border")); //设置属性 $("#p1").css({"background-color":"yellow","font-size":"200%"}); }) //尺寸 $("#btn3").click(function(){ //width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距) var txt=""; txt+="Width: " + $("#div3").width() + "</br>"; txt+="Height: " + $("#div3").height(); $("#div3").html(txt); //innerWidth() 方法返回元素的宽度(包括内边距)。 //outerWidth() 方法返回元素的宽度(包括内边距和边框)。 //outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。 }) })