jquery dynamic Replacement Setting background image method _jquery

Sometimes, we can provide users with very intimate functions, such as to determine when the user is to visit, and then give a greeting, good evening, good afternoon and so on. and change the background color of the Web page, such as night when you can use the background of the stars, daytime with the sun shining, or a specific holiday on the theme of the background, so that your site appears very flexible, not boring.

Here is a workaround for how to implement a background change:

How to Achieve

Very simply, here's the JQuery code:

Copy Code code 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:

Copy Code code 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:

Copy Code code as follows:

<div>
Background picture url:<input type= "text" size= "a" id= "Inputbkgurl"/> <br,/>
The background picture repeats the way: <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 replacement"/>
</div>
<div id= "Outputdiv" ></div>