Hello

I have a form where the user specifies a bg image url, and I want it to be set as the background image for a div.

The code for the div is as below:

<div class="dc m1_t" >
														<div class="dt m1_b" >
															<div class="dr">
																<div class="dc m1_pad" >
																	<span class="m1_h_text">Manufacturers:</span><br>
																	<img alt="" src="images/spacer.gif" width="1" height="12"><br>
																	<select class="sel1"><option>&nbsp; Sony</option></select>
																</div>
															</div>
														</div>
													</div>

I want that the bg image for the div with class value "dc m1_t" should be set to the value supplied in text box "s_bkbgiu". Is a div ID needed for this to be accomplished. How will this be coded

Thanks
Arvind

use a javascript library with CSS selectors such as jQuery. You can then perform a css selector query to get the node your after. Example

$('.dc').filter('.m1_pad').css('background-image', 'url(' + url + ')');

There are many other very good CSS based javascript libraries

I have heard that this can be accomplished using Pure Javascript without use of any library. Please tell me how to do this using pure javascript without any external library

Regards
Arvind

why not just use an ID

document.getElementById('myDiv').style.background = 'url(' + url + ')';

if your deperate to use classes and write your own code you will have to perform something like so

var divs = document.getElementsByTagName('div');
var url = document.getElementById('textbox').value;
for(var i = 0; i < divs.length; i ++) {
    if(divs[i].classname == 'dc m1_t') {
        divs[i].style.background = 'url(' + url + ')';
        break;
    }
}
This article has been dead for over six months. Start a new discussion instead.