javascript - 在页面加载时突出显示特定按钮

Question

我正在构建一个测验应用程序，对于其中的某个部分，我希望在加载页面时突出显示一些答案。

这些是按钮:

<input type="hidden" name="correct_answer" value="<?php echo (isset($correct_answer)) ?   $correct_answer : 'no corect answer';?>">
<button name="answer" value="A" class="btn btn-primary btn-lg">A</button>
<button name="answer" value="B" class="btn btn-primary btn-lg">B</button>
<button name="answer" value="C" class="btn btn-primary btn-lg">C</button>
<button name="answer" value="D" class="btn btn-primary btn-lg">D</button>
<button name="answer" value="E" class="btn btn-primary btn-lg">E</button>

您可以看到我正在加载一个包含正确答案的隐藏元素。

所有后端工作正常，但我似乎无法弄清楚该怎么做。

是否可以在原生 JS 中执行此操作，还是必须使用 jQuery？另外，我该怎么做呢？如何确保将 CSS 类添加到正确的元素？

编辑:

这是我最终使用的代码:

<script type="text/javascript">
document.getElementById("<?php echo $correct_answer;?>").style.backgroundColor = "green";
</script>

Answer 1

您可以使用 backgroundColor 使用 vanila javascript 来做到这一点，

所以你的 js 代码应该是这样的:

document.getElementById("answer1").style.backgroundColor = "red";

Working Fiddle

请注意，我已经为一个元素设置了 Id，但是您可以为所有元素设置并使用要更改背景的 Id。