how to dynamically replace css?

Question

I've got an image on the page (class='image') within the div (class='galleria_wrapper') and want to place a caption (class='caption') at the lower right corner under that image.

The image could be vertical or horizontal, and making a fixed padding-right value let's say

.caption<{float:right;padding-top:5px;padding-right:90px;} 

is not working for one or another. I need to switch on the fly padding-right value depending on horizontal or vertical image is currently on the page. I can theoretically access image's width through document.getElementByName('image').width although don't understand where to put that code. So, I probably need something like that:

document.getElementByClass('caption').padding-right = 
    (document.getElementByName('galleria_wrapper').width - 
    document.getElementByName('image').width)/2

Where do I put this code?

I do have that in my css file:

.caption{float:right;padding-top:5px;}

which places the caption below the image, but to far to the right (div 'galleria_wrapper' is wider than most of the images supposed to be displayed within that area).

I have an img tag in the html:

<img src=image title='this is caption' /></li>

...and some JavaScript which makes title displayed styled by the "caption" css definition.

How do I assign variable value for the padding-right without in-advance knowledge of particular image's width?

Answer 1

Put that code inline with the .caption element.

<div class="caption" style="padding-right: XXpx;">caption text</div>

Your question is not really clear and there is a better solution, but your full markup/demo page would be needed.

UPDATE

Just add the span to the galleria_wrapper div and then set text align right.

<div class="galleria_container">
  <div class="galleria_wrapper">
    <div style="text-align: right;">
      <img id="image" src="strangers/010.jpg" class="replaced" onload="resizeToMax(this.id)" style="cursor: pointer;">
      <span class="caption">Moscow Region, late 1980-s</span>
    </div>
  </div>
</div>

Answer 2

It is not clear why you are trying to do whatever you are trying to do with the caption. Does galleria_wrapper have only one image in it? It sounds like you have a fixed width galleria_wrapper and you want the caption at the bottom right of the photo wherever it is. If so, I'd wrap the image and caption inside another div, center that div within the galleria_wrapper, and text-align right the caption.

Answer 3

To access programatically to the padding-right, the object property is object.style.paddingRight.

Often, the true size of an object is in px. So when you get its width prpoerty remove the 'px' at the end of the string before doing a parseInt or parseFloat on it.

So your function becomes:

var objs = document.getElementsByClass('caption'); //Is it one of your functions?
for(var index =0;index<objs.length;index++){
   objs[index].style.paddingRight = 
    ( parseInt(document.getElementByName('galleria_wrapper').offsetWidth) - 
    parseInt(document.getElementById('image').offsetWidth )/2))+"px";
}