Восстановление стиля нажатой кнопки

Мне нужна помощь: я сделал три кнопки, как только я нажму на один из них, его стиль должен быть изменен через Javascript. Это работает. Но что-то еще должно произойти: как только я снова нажму кнопку, старый стиль будет восстановлен. Посмотрите на код:Восстановление стиля нажатой кнопки

function changeStyleOne(){ 
if(this.style.background != 'rgba(207,207,207,.8)'){ 
    this.style.background = 'rgba(207,207,207,.8)'; 
    this.style.boxShadow = '0 5px 20px rgba(0,0,0,.3) inset'; 
    this.style.borderLeft = '0'; 
    this.style.width = '99px'; 

    button2.style.background = '-webkit-linear-gradient(bottom, #B9B9B9 0%, white 90%)'; 
    button2.style.width = '98px'; 
    button2.style.borderLeft = '1px solid white'; 
    button2.style.boxShadow = ''; 
    button3.style.background = '-webkit-linear-gradient(bottom, #B9B9B9 0%, white 90%)'; 
    button3.style.width = '98px'; 
    button3.style.borderLeft = '1px solid white'; 
    button3.style.boxShadow = ''; 

displayContent1(); 

}else{ 
    this.style.background = '-webkit-linear-gradient(bottom, #B9B9B9 0%, white 90%)'; 
    this.style.boxShadow = ''; 
    this.style.borderLeft = '1px solid white'; 
    this.style.width = '98px'; 
}

}

Это не работает: когда я снова нажмите на кнопку, она не восстанавливает старый стиль. Ты знаешь почему?

источник

2013-04-27 Renato Bispo

Использование класса, и переключаться между названий класса будет лучшим решением. – ocanal

Иногда у браузеров возникают проблемы с работой с 'rgb (x, x, x)', то же самое происходит и для rgba. Я сделал то же самое сегодня - отлично работал в Chrome, но Firefox сказал нет. Работа с классами действительно была бы лучше. – jdepypere

Имейте в виду, что когда вы говорите «rgba (207,207,207, .8)», сценарий EMCA анализирует эту строку, интерпретируя ее как спецификацию «rbga», а затем анализируя каждое значение. Первые три значения '207' сохраняются как интегральные значения, но последний .8 хранится как с плавающей запятой. Поэтому, когда вы позже попросите «this.style.background», он может вернуться как «rgba (207, 207, 207, 0,8)» или какой-нибудь такой (возможно, на правом Pentium, он будет выглядеть «0.799999999»). Таким образом, не ожидайте, что он буквально (персонаж по характеру) вернет то, что вы его передали. Класс не обрабатывается таким образом, поскольку это строковый идентификатор. –

Вот простой пример,

http://jsfiddle.net/LT4sQ/

.class1 { 
    background: -webkit-linear-gradient(bottom, #B9B9B9 0%, white 90%); 
    box-shadow: none; 
    border-left: 1px solid white; 
    width: 98px; 
} 
.class2 { 
    background: rgba(207, 207, 207, .8); 
    box-shadow: 0 5px 20px rgba(0, 0, 0, .3) inset; 
    border-left: 0; 
    width: 99px; 
} 

function changeStyleOne(e) { 
    e.className = (e.className == "class1") ? "class2" : "class1"; 
}

источник

2013-04-28 00:01:46 ocanal

На мой взгляд, включение Javascript в HTML-код является плохой практикой. [Подробнее] (http://en.wikipedia.org/wiki/Unobtrusive_JavaScript#Separation_of_behavior_from_markup). – bookcasey

Это тоже работает, хотя я не понял синтаксис, но большое спасибо! –

Вот простой пример, который вы можете узнать из:

HTML:

<button>Button 1</button> 
<button>Button 2</button> 
<button>Button 3</button>

CSS:

JQuery:

$("button").click(function() { 
    $(this).toggleClass('styled'); 
});

Demo

источник

2013-04-28 00:37:30 bookcasey

Это работает, спасибо. Я не знаю jQuery, потому что я полностью новичок в веб-разработке. Но опять же, спасибо, я постараюсь это приспособить! –

Восстановление стиля нажатой кнопки

ответ

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