*开始编辑*
以下所有内容（在此[编辑]之后）仍然正确。我尝试通过Javascript更改样式变量的值时，此[EDIT]提示为什么。这个重要的为什么质疑我是否应该尝试更改样式变量的值。也许我应该尝试其他的东西？
这个至关重要的原因是基于这样一个事实，我的基本布局（所有相对位置）的最底部都包含一个基本的<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是什么，因为CSS中未指定.bottom。
哪个打开了另一个重要的花絮；即，我已经读过，这种object.style.parmName检索仅适用于内联样式，不能从外部样式表导入的样式，不适用于从嵌入在{ {1}}。
因此，很明显，我沉迷于无知的海洋中，需要您的帮助。
答案 0 :(得分：1)
第一个问题： 如果您尝试使用Javascript更改样式，则需要获取ID或类，就像使用变量一样。
var x = document.getElementById('something');
然后，您需要使用该变量并添加.style.backgroundColor = 'green';。您可以将backgroundColor和green更改为所需的任何颜色。只是知道，如果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;，您可以将solid更改为所需的任何边框。 w3schools可以告诉您一些方法。在JavaScript中，它将为x.style.borderBottom = 'solid';
我希望我能提供帮助，如果您不了解或无法正常工作，请对此答案发表评论！如果确实有帮助，请接受此答案并对其进行投票。谢谢！