Изменение стилей

#javascript #html #css #веб_программирование

Доброго времени суток коллеги, вопрос такой: 
Как изменить стиль элемента при нажатии на другой элемент?



Пример:
У меня есть вот такая кнопка




        
            GOOGLE
        



Как при нажатии на кнопку первая буква меняла цвет на красный(к примеру)?
    

Ответы

Ответ 1

Еще как вариант



a {
  text-decoration: none;
  display: block;
  width: 10rem;
  height: 5rem;
  line-height: 5rem;
  background: #111;
  color: #fff;
  border-radius: 4px;
  text-align: center;
  letter-spacing: 4px;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 1.5rem;
}
a:first-letter {
  color: cornflowerblue;
}
a:focus:first-letter{
  color: tomato;
}

    GOOGLE



Ответ 2

Можно сделать на основе checkbox, безо всяких скриптов и с корректным сохранением
состояния:



.logo input {
    display: none
}

.logo input + label
{
    background-color: #0b0b0b;
    border-radius: 4px;
    border: 4px solid #065284;

    -webkit-box-shadow: inset 0px 0px 42px 0px rgba(6,82,132,1);
    -moz-box-shadow: inset 0px 0px 42px 0px rgba(6,82,132,1);
    box-shadow: inset 0px 0px 42px 0px rgba(6,82,132,1);

    color: white;
    cursor: pointer;
    display: inline-block;
    font: 1.5rem sans-serif;
    letter-spacing: 4px;
    padding: 0.5rem 1rem;
    text-transform: uppercase
}

.logo input + label span
{
    color: cornflowerblue
}

.logo input:checked + label span
{
    color: tomato
}

    
    Google





Суть состоит в том, что checkbox скрытно хранит состояние, влияя на страницу через
стилевой псевдокласс :checked. Пользователь, в свою очередь, может менять это состояние
через связанный label.



Добавлено:

Если необходимо заблокировать обратное переключение, можно организовать подмену label
на неинтерактивный div при активации флажка:



.logo input + label,
.logo .active
{
    background-color: #0b0b0b;
    border-radius: 4px;
    border: 4px solid #065284;

    -webkit-box-shadow: inset 0px 0px 42px 0px rgba(6,82,132,1);
    -moz-box-shadow: inset 0px 0px 42px 0px rgba(6,82,132,1);
    box-shadow: inset 0px 0px 42px 0px rgba(6,82,132,1);

    color: white;
    display: inline-block;
    font: 1.5rem sans-serif;
    letter-spacing: 4px;
    padding: 0.5rem 1rem;
    text-transform: uppercase
}

.logo input + label
{
	cursor: pointer;
}

.logo input + label span
{
    color: cornflowerblue
}

.logo .active span
{
    color: tomato
}

/* Логика переключения */

.logo input,
.logo input:checked ~ label,
.logo input:not(:checked) ~ .active {
    display: none
}

    
    Google
    
Google



Ответ 3

Например так:



$('.btn').on('click', function(e){
  e.preventDefault();
  
  var 
    $this = $(this),
    chart = $this.find('.myfirstchar');
  
  if(!$this.hasClass('changeColor')){
    $this.addClass('changeColor');
  } else {
    $this.removeClass('changeColor');
  }
});
a {
  text-decoration: none;
  display: block;
  width: 10rem;
  height: 5rem;
  line-height: 5rem;
  background: #111;
  color: #fff;
  border-radius: 4px;
  text-align: center;
  letter-spacing: 4px;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 1.5rem;
}

.myfirstchar {
  color: cornflowerblue;
}

.changeColor .myfirstchar {
  color: tomato;
}


        
            GOOGLE