-1

我有这个 div：

<div class="galleria-info" style="">
    <div class="galleria-info-text">
        <div class="galleria-info-title" style="">#test</div>
    </div>
</div>

我有这个CSS：

.galleria-info {
    width: 100%;
    top: 290px;
    left: 330px;
    z-index: 10;
    position: absolute;
}

我想做的是通过javascript以某种方式动态更改galleria.info div的left属性，以便根据#test的文本长度，我可以将div定位到足够远的位置，以便在屏幕上为它腾出空间。

我在 HTML 中动态地写了单词#test 所在的不同信息，并且它没有仅 ID 类。

任何线索或帮助将不胜感激！

4

2 回答 2

2 
document.getElementsByClassName('galleria-info')[0].style.left = '300px'; // or whatever you want
于 2013-01-28T01:29:56.283 回答
1

你有两个问题；我有两个答案。

按类名获取

getElementById()通过 idgetElementsByTagName()[]获取元素，通过标签名获取元素，并通过类名获取元素，使用：

document.querySelectorAll("galleria-info")

设置位置

对不起，我用getElementByIdandgetElementsByTagName而不是querySelectorAll.

right属性

属性不是right更合适吗？你可以得到身体（或容器）的宽度，然后从中减去你想要的。

var body_width = document.getElementsByTagName('body')[0].style.width;
var body_width = parseFloat(body_width);
document.getElementById('galleria-info').style.right = (body_width - 600) + "px";

固定宽度字体

但是，如果您使用的是固定宽度的字体，那么您可以获得字符串的长度，乘以每个字符的宽度，然后设置style.left为减去它可以达到的最大距离（即 300 像素）。

var str_length = document.getElementById('galleria-info').innerHTML.length;
var str_length = str_length * 10; // Or whatever the fixed width is
document.getElementById('galleria-info-text').style.left = (300 - str_length) + "px";

包装器

这不使用 JavaScript，在我看来，这是一件好事，因为用户可以禁用 JavaScript。您可以在具有以下 CSS 的原始 div 周围有一个包装 div：

#galleria-info-wrapper {
    width:300px;
    text-align:right;
}
#galleria-info {
    text-align:left;
}
于 2013-01-28T02:00:59.990 回答