Question

我希望我的按钮在点击[假设黑色]时更改颜色，但在页面刷新时我不希望它将其颜色更改回原始颜色。

<html>
    <head>
    <style>
    .button {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }
    </style>
    </head>
    <body>

    <h2>CSS Buttons</h2>



    <input type="button" class="button" value="Input Button">

    </body>
    </html>

Answer 1

<html>
<head>
<script>
/* On load of the page we are calling this function which will
 give us the color name stored in our local storage */
        function changeColor() {
            var color = localStorage.getItem("colorName");
            document.getElementById("color").style.backgroundColor = color;
        }
/*This function will change the color of button on click*/
        var i = -1;
        function colorArray() {
            var arr = new Array();
            arr[0] = "Red";
            arr[1] = "Orange";
            arr[2] = "Green";
            arr[3] = "Blue";
            i++;
            if (i > arr.length - 1) {
                i = 0;
            }
/* We have an array with the color names, you can add any 
number of colors in this array */
/* After fetching the color from array we are storing 
it in the local storage of our browser for future use*/
            localStorage.setItem("colorName", arr[i]);
            document.getElementById("color").style.backgroundColor = arr[i];
        }
    </script>
</head>

<body onload="changeColor()">
    <button onclick="colorArray()" id="color"> Change Color </button>
</body>

</html>

Click here for Live Demo and complete source code

Answer 2

当你获得一个带有JavaScript的元素时，你可以访问这个元素的一堆属性有两个解决方案来修改他的属性：

修改css属性（myElement.style.myProperty = 'myNewValue'）
修改班级列表（myElement.classList.add('myClassName')）

作者编辑后更新：

您可以在按钮上调用功能onclick="..." 该功能将为此按钮添加一个类来改变他的风格然后在localStorage，会话，cookie或数据库中存储带有布尔值的按钮状态（例如clicked = true）。
下次访问该页面时，如果单击== true，则添加check onload以在此按钮上添加此类。

Answer 3

您可以使用本地存储在页面刷新后保留颜色。

window.onload = function(){

    var btn = document.getElementById("btn");

    if(localStorage["bg-color"]){
        btn.style.backgroundColor = localStorage.getItem("bg-color");
    };

    btn.onclick = function(){
        if(!localStorage["bg-color"]){
            localStorage.setItem("bg-color", "yellow");
        };
        btn.style.backgroundColor = localStorage.getItem("bg-color");
    };
    // remove from storage localStorage.removeItem("bg-color")
};

Answer 4

您可以使用cookie来存储页面重新加载之间的颜色状态，这是一个基本示例。

＆＃13;

function setColor(color){
  document.querySelector('#button').style.background = color
  document.cookie = `color=${color};`
}

function getColor() {
  return document.cookie.split('; ')      // ['color=blue']
    .reduce((acc, x) => {
      const [ key, value ] = x.split('=') // ['color', 'blue']
      acc[key] = value                    // { color: 'blue' }
      return acc
    })
    .color
}

// run the functions on page load
window.addEventLister('DOMContentLoaded', function(){
  setColor(getColor())
})

setColor('#bada55')

＆＃13;

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

＆＃13;

<h2>CSS Buttons</h2>
<input id="button" type="button" class="button" value="Input Button">

＆＃13;

用javascript更改按钮颜色

4 个答案: