可以通过javascript动态更改DIV的CSS属性，只需知道它的类吗？

Question

我有这个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的左属性，以便根据#test的文本长度，我可以将div放置得足够远，以便为它腾出空间屏幕。

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

任何线索或帮助都将受到极大的赞赏！

Answer 1

document.getElementsByClassName('galleria-info')[0].style.left = '300px'; // or whatever you want

Answer 2

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

按类名获取

getElementById()通过其id获取元素，getElementsByTagName()[]按标记名称获取元素，并按类名获取，使用：

document.querySelectorAll("galleria-info")

设置位置

抱歉，我使用了getElementById和getElementsByTagName代替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设置为减去它可以达到的最大距离（即300px。）

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。你可以在原始div周围有一个包装div，它包含以下CSS：

#galleria-info-wrapper {
    width:300px;
    text-align:right;
}
#galleria-info {
    text-align:left;
}