How does jquery dynamically change the webpage background image?

This article mainly introduces how jquery dynamically replaces the webpage background image. For more information, see

Sometimes, we can provide users with very considerate functions, such as determining when the user will access the service, and then giving a greeting, such as good evening and good afternoon. In addition, you can change the background color of the webpage. For example, you can use the background of a star in the sky at night, the sun is shining during the day, or the background of the topic is used for a specific holiday, it makes your website very flexible and not boring. The following describes how to implement background replacement and provides a solution: how to implement it is simple. The JQuery code is as follows: function doChangeBkg () {var bkgUrl =$ ("# inputBkgUrl "). val (); var repeateMode = $ ("# inputRepeatMode "). val (); var s = "<style type = 'text/css '> body {background-repeat:" + repeateMode + "; background-image: url (\ "" + bkgUrl + "\") ;}</style> ";$ (" # outputDiv ").html (s) ;} native JavaScript code: the code is as follows: function doChangeBkg () {var bkgUrl = $ ("# inputBkgUrl "). val (); var repeateMode = $ ("# inputRepeatMode "). val (); var s = "<style type = 'text/css '> body {background-repeat:" + repeateMode + "; background-image: url (\ "" + bkgUrl + "\") ;}</style> ";$ (" # outputDiv ").html (s) ;}front-end code: the code is as follows: <div> background image URL: <input type = "text" size = "60" id = "inputBkgUrl"/> <br/> duplicate background image format: <select id = "inputRepeatMode"> <option value = "repeat" selected = "selected"> repeat </option> <option value = "no-repeat"> no-repeat </option> <option value = "repeat-x"> repeat-x </option> <option value = "repeat-y"> repeat-y </option> </select> <input type = "button" onclick = "doChangeBkg () "value =" confirm to change "/> </div> <div id =" outputDiv "> </div>