使用Javascript [EDITED]更改样式变量的值

Question

*开始编辑*

以下所有内容（在此[编辑]之后）仍然正确。这个[编辑]揭示了为什么我试图用Javascript改变样式变量的值。这个重要的WHY问我是否应该尝试更改样式变量的值。也许我应该尝试其他的东西？

这个至关重要的原因在于我的基本布局（所有相对定位）在最底部包含一个基本的<audio>标签。这个<audio>标签是非常无纪律的，通过在真正的iPhone上进行缩放缩放，这个<audio>向上移动并覆盖其前面的其他相对对象。

我已经埋没在我对这一运动的描述之下，但我认为这一运动应该在一开始就突显出来。

我想强调的是，这种无法解释的垂直运动是在真正的iPhone上。在模拟的iPhone上，通过开发人员菜单，<audio>没有表现出这种令人讨厌的行为......使用Safari，Chrome或Firefox或Opera。

那么，我应该尝试的其他事情是什么？

[为了这个问题描述的完整性，为了每个人的努力和耐心的工作，我故意留下下面所有的东西试图帮助我]

*结束编辑*

最终，我的目标是使用Javascript更改样式变量的值。在此期间，我无法得到一个简单的alert(...)来展示任何东西。所以，我想我会从这些基本的东西开始，并从那里建立（我在下面提出警报方式）。

HTML：

<div id="caroler">
as sung by an unknown Caroler
</div>

<div id="audioWrapper">
<audio class="aSongControl" controls preload="auto">
    <source src="..." type="audio/mp4">
</audio>
</div>

CSS：

#caroler {
    text-align: center;
    font-size:  1.70em;
    color:      blue;

    padding-bottom: 1.0em;
}

/* do the positioning within the Wrapper */
#audioWrapper {
    display: block;     /* center ... */
    margin:  0 auto;

    width:  90%;
}

.aSongControl {
    width:  100%;        /* fill the Wrapper */

    font-size: 120%;     /* for non-support text ... */
    color:     #990099;
}

JAVASCRIPT：

/* we'll let the css DOM take care of the initial rendering */
window.onresize = function() {
    theCaroler = document.getElementById("caroler");
    theSong    = document.getElementById("audioWrapper");
    alert(theCaroler.style.color);
}

请注意，最终我希望动态更改#audioWrapper的顶部，以便它随着窗口大小调整而上下移动。

（是的，我知道常规的CSS布局会很容易做到这一点，但是dang <audio>标签会对窗口调整大小造成严重破坏...就像窗口调整大小重叠它上面的东西。所以我想（??）我会用Javascript移动<audio>标签）

但是，与此同时，由于以上所有，我无法得到简单的alert(theCaroler.style.color)来展示任何东西。相当基本的东西，我显然还不明白（还）。

下一步将找出theCaroler.style.bottom是什么，因为.bottom没有在CSS中指定。

这开辟了另一个重要的花絮;也就是说，我已经读过这样的object.style.parmName检索仅适用于内嵌样式，而不是从外部样式表导入的样式，而不是<header>中嵌入的样式。

所以，很明显我在无知的海洋中徘徊，我需要你的帮助。

Answer 1

第一个问题：如果您尝试使用Javascript更改某些内容的样式，则需要获取id或类，就像使用变量一样。

var x = document.getElementById('something');

然后你需要使用该变量并添加.style.backgroundColor = 'green';。您可以将backgroundColor和绿色更改为您需要的任何内容。只要知道如果在CSS标记中有一个破折号，例如在background-color中，那么在JavaScript中你需要删除破折号并将第二个词大写，使它成为一个复合词，因为JavaScript不喜欢破折号，除了字符串。

var x = document.getElementById('something');
x.style.backgroundColor = 'green';

第二个问题：你使用alert();走在正确的道路上。唯一需要的是你需要在它之前添加window.。

window.alert('This is an alert');

第三个问题：我假设你正试图改变底部边界。在CSS中，这将是border-bottom: solid;，您可以将实体更改为您需要的任何边框。 w3schools可以告诉你一些方法。在JavaScript中，它将是x.style.borderBottom = 'solid';

我希望我有所帮助，如果有什么你不理解或不工作，那么只需评论这个答案！如果确实有帮助，请接受此答案并进行投票。谢谢！