Добавление класса в элемент поиска с помощью JavaScript - PullRequest
Новая
       28

Добавление класса в элемент поиска с помощью JavaScript

2 голосов
/ 31 марта 2019

У меня есть кнопка, которая меняет свой цвет при наведении. 

const btn = document.querySelector('.btn');
btn.classList.add('green-background');
.btn {
  text-decoration: none;
  background: blue;
  color: white;
  font-size: 20px;
}

.btn:hover {
  background: magenta;
  cursor: pointer;
}

.green-background {
  background: green;
}
<input class="btn" type="submit" value="Click me" />

Я хотел бы добавить его к классу green-background, чтобы кнопка была зеленой и в состоянии по умолчанию, и при наведении курсора.

Ответы [ 3 ]

1 голос
/ 31 марта 2019

Вам просто нужно добавить правило css, которое определяет стиль для .green-background при наведении, что вы можете сделать, установив стили для .green-background:hover

const btn = document.querySelector('.btn');
btn.classList.add('green-background');
.btn {
  text-decoration: none;
  background: blue;
  color: white;
  font-size: 20px;
}

.btn:hover {
  background: magenta;
  cursor: pointer;
}

.green-background, .green-background:hover {
  background: green;
}
<input class="btn" type="submit" value="Click me" />
1 голос
/ 31 марта 2019

Вы можете объединить два селектора, используя , по умолчанию и hover. См. Группы селекторов в одном правиле для получения дополнительной информации. 

const btn = document.querySelector('.btn');
btn.classList.add('green-background');
.btn {
  text-decoration: none;
  background: blue;
  color: white;
  font-size: 20px;
}

.btn:hover {
  background: magenta;
  cursor: pointer;
}

.green-background:hover,.green-background {
  background: green;
}
<input class="btn" type="submit" value="Click me" />
0 голосов
/ 31 марта 2019 
 function changeclass() {
            const btn = document.querySelector('.btn');
            if (!btn.classList.contains('green-background'))
                btn.classList.add('green-background');
            else
                btn.classList.remove('green-background');

        }

<!-- language: lang-css -->

    .btn {
      text-decoration: none;
      background: blue;
      color: white;
      font-size: 20px;
    }

    .btn:hover {
      background: magenta;
      cursor: pointer;
    }

    .green-background, .green-background:hover {
      background: green;
    }

<!-- language: lang-html -->

    <input class="btn" type="submit" value="Click me" onmouseover="changeclass()" onmouseout="changeclass()" />

Вы спрашивали, как добавить класс с помощью java-скрипта: просто добавьте событие onmouseover = "changeclass ()" onmouseout = "changeclass ()" для кнопки и функцию changeclass но вы также можете сделать это с помощью css, как утвержденный ответ.

...