练习——事件函数(切换div的背景颜色)

    科技2022-08-19  126

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 150px; height: 150px; background-color: red; color: white; font-size: 20px; } </style> </head> <body> <div>div1</div> <script src="jquery-1.10.1.min.js"></script> <script> // 制作一个红色背景白色文字(div1)的div,当点击该元素时,背景色变成黄色,文字变成div2颜色为红色,再次点击时则变回来 var bOn = true; $("div").click(function (){ // $(this).html($(this).html()=="div1" ? "div2" : "div1").css({ // "backgroundColor" : $(this).html()=="div2" ? "yellow" : "red", // "color" : $(this).html()=="div2" ? "red" : "white", // }) // 方法二 $(this).html(bOn ? "div2" : "div1").css({ "backgroundColor" : bOn ? "yellow" : "red", "color" : bOn ? "red" : "white", }) bOn = !bOn; }) </script> </body> </html>
    Processed: 0.017, SQL: 9