Javascript: select image element inside div

Question

I have a parent div gal1 , inside which there may be additional divs and content, but only one img element without id, as you can see below. Now I want to use only Javascript ( no jQuery ) to change the style of this image using gal1 as an argument (because the rest of the structure inside this div may be different, only this one image will always be somewhere there). I could not find any other stackoverflow question that would accurately reflect my situation.

 <div class="gallery-preview" id="gal1"> <div class="gallery-preview-img" id="gal-img1"> <img src="galleries/kevin-carls/Monks.jpg"> </div> <div class="gallery-preview-text" id="gal-text1"> <span class="gallery-name" href="">Road to India</span><br/> <span class="artist-name" href="">Kevin Carls</span> </div> </div> 

Answer 1

Than you can use the method called getElementsByTagName('img') , than you should receive the image and update it.

 document.getElementById(gal1).getElementsByTagName('img'); 

Answer 2

get content using id and then request images using getElementsByTagName

 function getImages(contentId) { var content = document.getElementById(contentId); // only one image, just return an item; or you can return an array if (content) return document.getElementsByTagName('img')[0]; } 

Answer 3

You can insert CSS, which can be more efficient if you need to do this in more than one case.

http://jsfiddle.net/65Ggv/

 var style_rules = []; style_rules.push("#gal1 img { border: 3px solid green; } "); var style = style_rules.join("\n"); var el=document.createElement("style"); el.appendChild(document.createTextNode(style)); el.type="text/css"; document.head.appendChild(el); 

Answer 4

If you absolutely do not need to choose colors or border sizes dynamically, which I doubt is because you are a recognized beginner, stuffing style sheets with Javascript is a Rube Goldberg device. It seems elegant to be able to do this, but if your application is important to you, you will regret it. (You can use innerHTML to populate the stylesheet in this case - at least it will be faster than calling the DOM.)

Pranay Rana's answer to using getElementsByTagName is the best option if your restrictions are actually stable (only one img). Get the el element reference to gal1 using getElementById, then var myimg = el.getElementsByTagName ("img") and you're almost done.

If you insist on imposing style nodes, you can use any properties you want in the myimg style property. It becomes embedded.

However, you almost certainly don't need to write new rules, and you can often avoid changing the style of the inline style. It is more predictable and stable to change the class attribute on myimg and use a predefined set of style classes for the cases you need to handle. This will give a nice clean separation of style from the script, and avoid both aligning the style rules and embedding the style tree style by injecting code.