изменение цвета кнопки с javascript

-1

Я хочу, чтобы моя кнопка меняла цвет при нажатии [предположим, черный], но на странице обновления я не хочу, чтобы он изменил свой цвет на исходный цвет.изменение цвета кнопки с javascript

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

источник

2016-10-16 prabal.t

Это невозможно сделать __just__ с JavaScript. –

Есть ли причина, по которой вы не будете использовать jQuery? было бы очень легко использовать jQuery –

Возможный дубликат [Изменить цвет кнопки onClick] (http://stackoverflow.com/questions/26937424/change-button-color-onclick) –

Когда вы получите элемент с JavaScript, вы можете получить доступ к куче свойств этого элемента.
Существует два решения изменить его свойства:

изменить свойство CSS (myElement.style.myProperty = 'myNewValue')
изменить список классов (myElement.classList.add('myClassName'))

Update после автора редактирования:

Вы можете позвонить с помощью функции onclick="..." на t он кнопка.
Функция добавит класс к этой кнопке, чтобы изменить его стиль.
Затем сохраните на своем локальном хранилище или в сеансе или в файле cookie или в базе данных состояние кнопки с булевым (например, щелчком = true).
В следующий раз, когда вы заходите на страницу, добавьте checkload для добавления этого класса на эту кнопку, если щелкнуть == true.

источник

2016-10-16 09:39:57 C0ZEN

Вы можете использовать локальное хранилище, чтобы сохранить цвет после обновления страницы.

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") 
};

источник

2016-10-16 09:41:28 nick

Вы можете использовать файлы cookie для сохранения состояния цвета между перезагрузкой страницы, вот пример.

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')

.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; 
 
}

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

источник

2016-10-16 09:44:19 synthet1c

, если пользователь удаляет файлы cookie браузера, все данные будут потеряны. Возможно, вы предложите любой другой способ, которым он устанавливает свойство постоянно даже после обновления страницы. –

, только если вы храните его в базе данных где-нибудь. – synthet1c

<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

источник

2017-05-28 16:37:12 Chinmay

ответ

Смежные вопросы