как динамически заменить CSS?

Question

У меня есть изображение на странице (class = 'image') внутри div (class = 'galleria_wrapper') и я хочу разместить заголовок (class = 'caption') в правом нижнем углу под этим изображением .

Изображение может быть вертикальным или горизонтальным и иметь фиксированное правильное значение заполнения, скажем,

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

не работает для одного или другого. Мне нужно на лету переключить значение padding-right в зависимости от горизонтального или вертикального изображения, которое в данный момент находится на странице. Теоретически я могу получить доступ к ширине изображения через document.getElementByName ('image'). Width, хотя не понимаю, куда поместить этот код. Итак, мне, наверное, нужно что-то подобное:

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

Куда мне поместить этот код?

У меня есть это в моем файле CSS:

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

, который размещает заголовок под изображением, но далеко вправо (div 'galleria_wrapper' шире, чем большинство изображений, которые должны отображаться в этой области).

У меня есть тег img в html:

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

... и некоторый JavaScript, который отображает заголовок в стиле определения css "caption".

Как назначить значение переменной для отступа вправо без предварительного знания ширины определенного изображения?

Answer 1

Непонятно, почему вы пытаетесь делать то, что вы пытаетесь сделать с надписью. Есть ли у galleria_wrapper только одно изображение? Похоже, у вас есть фиксированная ширина galleria_wrapper и вы хотите подпись в правом нижнем углу фотографии, где бы она ни находилась. Если это так, я бы обернул изображение и подпись внутри другого div, центрировал его внутри galleria_wrapper и выровнял текст по заголовку.

Answer 2

Поместите этот код в строку с элементом .caption.

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

Ваш вопрос не совсем понятен, и есть лучшее решение, но вам понадобится полная разметка / демонстрационная страница.

UPDATE

Просто добавьте span в div galleria_wrapper и затем установите выравнивание текста вправо.

<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 3

Для программного доступа к правому отступу свойство объекта имеет вид object.style.paddingRight.

Часто истинный размер объекта указан в пикселях. Поэтому, когда вы получите его ширину prpoerty, удалите «px» в конце строки перед выполнением parseInt или parseFloat.

Итак, ваша функция становится:

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";
}