Question

我为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>

更新：没有任何代码可以正常工作，也许是一个问题...但它可以支持javascript。如果那里有一个tumblr主题作家那么，它会有用吗，有什么帮助吗？

Answer 1

只需使用三个按钮将您想要的颜色传递到更改背景的功能中即可。我希望这就是你要找的东西。

<!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>

Answer 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>

用按钮更改标题背景颜色

2 个答案: