使用按钮更改标题背景颜色答案

【问题标题】：Change Header Background Colour with Button使用按钮更改标题背景颜色
【发布时间】：2014-07-11 19:06:55
【问题描述】：

我为我的tumblr 博客创建了一个自定义主题。我正在尝试添加一个按钮，该按钮将为最终用户更改标题背景的颜色。我想要blue(#4BD4DE)、red(red) 和green(#1FDE2C) 的3 个按钮。我对Javascript的了解有限。我用过<button> 和<input>。到目前为止我所尝试的，`

<script>
$("btnBlue").on("click", function() {
  document.header.style.backgroundColor = 'blue';
});
</script>`

但这无济于事。有什么帮助吗？我检查了有关堆栈溢出的其他问题，但没有一个有效，而且我没有足够的知识来更改发布的代码。

我正在使用的与此相关的代码

<!DOCTYPE html>

<html>
<head>

<!-- CSS Style -->

<style>
header {
    background: #4BD4DE;
    border-radius: 5px;
    height: 300px;
}
</style>
</head>

<!-- Tumblr styling here -->

<!-- BUTTONS -->
<button class="btnBlue">Change Colour</button> <button class="btnRed">Change      Colour</button> <button class="btnGreen">Change Colour</button>


<!-- JavaScript -->
<script>
$("btnBlue").on("click", function() {
  document.header.style.backgroundColor = 'blue';
});
</script>

</body>
</html>

更新：没有任何代码可以正常工作，可能是 tumblr 问题……但 tumbr 似乎支持 javascript。如果有人在那里有一个 tumblr 主题作家，它会起作用吗，有什么帮助吗？

【问题讨论】：

stackoverflow.com/questions/5565696/…的可能重复
你最好开始学习一些 JavaScript 并先尝试一些东西 ;-)。
这不是问问题的方式，至少张贴你的标题和按钮的标记......解决方案很简单......但你必须提供足够的细节
欢迎来到 Stack Overflow。如果您需要有关代码的帮助，请将其添加到您的问题中。
为了理智，JavaScript / jQuery 在 Tumblr 主题中运行良好。

标签： javascript html tumblr

【解决方案1】：

这很简单，只需使用三个按钮将您想要的颜色传递给更改背景的功能。我希望这就是你要找的。p>

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Header</h1>
<input type="button" value="Blue" onclick="color('#4BD4DE')">
<input type="button" value="Red" onclick="color('red')">
<input type="button" value="Green" onclick="color('#1FDE2C')">
<script>

function color(col){
document.getElementById("header").style.backgroundColor=col;

}

</script>

</body>
</html>

【讨论】：

代码在测试网页上运行良好，但不适用于我的 tumblr 主题，有什么建议吗？？
您是否尝试过添加确切的代码，它只有在标头的 id 为“header”时才有效

【解决方案2】：

应该这样做

$(document).ready(function () {
   $("button").click(function () {
      $("h1").css("background-color", "blue");
   });
});

http://jsfiddle.net/Wud22/

我希望，你想做的事情的扩展应该是显而易见的。使用 jQuery。

要包含 jQuery，您需要将此行添加到标题中：

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

【讨论】：

您的代码在测试中运行良好，但在 tumblr 上无法运行，也许不可能......谢谢
确保你已经包含了 jQuery。请参阅上面的编辑。
在 tumblr 中绝对有可能。您可能需要发布指向您的 tumblr 网站的链接。