Изменение цвета кнопки программно

Есть ли способ программно изменить цвет кнопки или хотя бы цвет метки кнопки? Я могу изменить сам ярлык с помощью

document.getElementById("button").object.textElement.innerText = "newlabel";

Но как изменить цвет?


javascript button dashboard label
person Zsolt    schedule 30.11.2009    source источник
comment
+1 просто потому, что я не вижу причин для кого-то голосовать за это.   -  person Jimmeh    schedule 30.11.2009

Ответы (6)


arrow_upward
36
arrow_downward

Я наконец нашел рабочий код - попробуйте это:

document.getElementById("button").style.background='#000000';
person Maurizio Pozzobon    schedule 13.11.2010
comment
document.getElementById(submit_button).style.backgroundColor = 'светло-зеленый'; // это сохраняет изменение цвета при наведении - person xinthose; 15.04.2015

arrow_upward
6
arrow_downward

Вот пример использования HTML:

<input type="button" value="click me" onclick="this.style.color='#000000';
this.style.backgroundColor = '#ffffff'" />

А вот пример с использованием JavaScript:

document.getElementById("button").bgcolor="#Insert Color Here";
person Nathan Campos    schedule 30.11.2009
comment
Извините, я ответил на все сообщения двумя сообщениями выше, вчера было поздно :-( Так что просто повторюсь, ни одно из предложений не работает, хотя последнее я не понимаю, поэтому я не пробовал. Спасибо за дальнейшие подсказки. - person Zsolt; 01.12.2009

arrow_upward
6
arrow_downward

Вероятно, лучше всего изменить className:

document.getElementById("button").className = 'button_color';

Затем вы добавляете стиль кнопки в CSS, где вы можете установить цвет фона и все остальное.

person matpol    schedule 30.11.2009
comment
Спасибо, Натан/ДОК, ничего из этого не работает. Просто ничего не происходит. Странно то, что в CSS цвет кнопки вообще не определен. Если я определю это как color: #00cccc; затем он меняет (статически) цвет текста метки.. Dashcode немного специфичен, я думаю, это Javascript, адаптированный для Apple... Есть дальнейшие идеи? Спасибо, Жолт. - person Zsolt; 01.12.2009
comment
может быть что-то с идентификатором кнопки, являющейся кнопкой - возможно, измените идентификатор на «submit_button» или что-то в этом роде - person matpol; 01.12.2009
comment
Сразу поменял id, у меня паранойя от зарезервированных слов...но не работает. - person Zsolt; 02.12.2009
comment
у вас есть класс, настроенный в CSS? - person matpol; 02.12.2009
comment
Да #my_button { семейство шрифтов: HelveticaNeue-Bold; размер шрифта: 12px; выравнивание текста: по центру; ширина: 60 ​​пикселей; курсор: по умолчанию; -khtml-user-select: нет; положение: абсолютное; справа: авто; поле сверху: 0px; верх: 185 пикселей; внизу: 175 пикселей; высота: авто; слева: 109 пикселей; цвет: RGB(0, 204, 204); } извините, не знаю, как сделать подсветку кода... по умолчанию записи цвета нет, я добавил ее вручную, и это изменило цвет текста. Я добавил его как #cc0000, но Daschode преобразует его в rgb(). - person Zsolt; 02.12.2009
comment
Дело в том, что если я проверяю значение document.getElementById(my_button).object.textElement.color, то он подхватывает только что установленное значение, но на внешний вид самой кнопки это никак не влияет, так что она либо не .color или object.textElement.color. - person Zsolt; 02.12.2009
comment
вам нужно изменить имя класса на document.getElementById(my_button) Я не думаю, что вам нужен бит object.textElement - person matpol; 02.12.2009
comment
извините, я не понимаю, можете ли вы указать мне URL-адрес, где это объясняется? - person Zsolt; 02.12.2009
comment
теперь я попробовал этот document.getElementById(my_button).setAttribute(class, my_button2); где my_button2 имеет цвет, отличный от my_button, тоже не работает :-( - person Zsolt; 02.12.2009

arrow_upward
1
arrow_downward

Если вы назначите его классу, он должен работать:

<script>
  function changeClass(){
    document.getElementById('myButton').className = 'formatForButton';
  }
</script>

<style>
  .formatForButton {
    background-color:pink;
   }
</style>

<body>
  <input id='myButton' type=button class=none value='Change Color to pink' onclick='changeClass()'>
</body>
person Jonathan Fascetti    schedule 24.08.2018

arrow_upward
0
arrow_downward

Я считаю, что вы хотите bgcolor. Что-то вроде этого:

document.getElementById("button").bgcolor="#ffffff";

Вот пара демонстраций, которые могут помочь:

Цвет фона

Изменение цвета фона

person DOK    schedule 30.11.2009

arrow_upward
0
arrow_downward

Попробуйте этот код Вам может понадобиться что-то вроде этого

<button class="normal" id="myButton" 
        value="Hover" onmouseover="mouseOver()" 
        onmouseout="mouseOut()">Some text</button>

Затем в файле .js введите это. Убедитесь, что ваш html подключен к вашему .js

var tag=document.getElementById("myButton");

function mouseOver() {
    tag.style.background="yellow";
};
function mouseOut() {
    tag.style.background="white";
};
person user9919032    schedule 09.06.2018