用按钮改变标题背景颜色

Change Header Background Colour with Button

本文关键字：背景 颜色 标题 改变 按钮      更新时间：2023-09-26

我已经为我的tumblr博客创建了一个自定义主题。我试图添加一个按钮，将改变我的头背景的颜色为最终用户。我只需要blue(#4BD4DE), red(red)和green(#1FDE2C)三个按钮。我对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的问题…但它似乎不支持javascript。如果有谁是tumblr的主题作家，那么它会工作吗，任何帮助?

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

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

应该可以了

$(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>
相关文章：