Question

我在div（class ='galleria_wrapper'）中的页面上有一个图像（class ='image'），并希望在该图像的右下角放置一个标题（class ='caption'）

图像可以是垂直的或水平的，并且可以设置一个固定的填充右边值

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

不适用于其中一种或另一种。我需要根据当前页面上的水平或垂直图像打开fly padding-right 值。理论上我可以通过document.getElementByName（'image'）来访问图像的宽度。宽度虽然不明白放置该代码的位置。所以，我可能需要这样的东西：

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'比应该在该区域内显示的大多数图像宽。）

我在html中有一个img标签：

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

...以及一些使标题显示为“caption”css定义的JavaScript。

如果没有预先了解特定图像的宽度，如何为填充权分配变量值？

Answer 1

目前尚不清楚为什么要尝试对标题进行任何操作。 galleria_wrapper中只有一张图片吗？听起来你有一个固定宽度的galleria_wrapper，你想要照片右下方的标题，无论它在哪里。如果是这样，我将图像和标题包装在另一个div中，将该div放在galleria_wrapper中，并将文本右对齐标题。

Answer 2

将该代码与.caption元素内联。

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

您的问题不是很明确，而且有更好的解决方案，但您需要完整的标记/演示页面。

<强>更新

只需将范围添加到galleria_wrapper div，然后将文本右对齐。

<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

要以编程方式访问padding-right，对象属性为 object.style.paddingRight。

通常，对象的真实大小是px。所以当你获得它的宽度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";
}

如何动态替换css？

3 个答案: