Нужна помощь с data-color button`а

226
14 октября 2018, 23:40

нужен скрипт который будет задавать data-color button-а при клике заднему фону Navbar`а на чистом js, объясните пож-ста,ибо в деле новичок,и не совсем понимаю,спасибо за помощь)

.btn-violet { 
  background-color: #563d7c; 
  color: #fff; 
} 
 
.navbar { 
  background-color: rgb(24, 18, 18); 
} 
 
.navbar-light .navbar-nav .nav-link { 
  color: #ffffff; 
} 
 
.navbar .navbar-brand { 
  color: #fff; 
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" /> 
<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <title>Document</title> 
</head> 
 
<body> 
  <nav class="navbar navbar-expand-lg navbar-light"> 
    <a class="navbar-brand" href="#">Navbar</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
            <span class="navbar-toggler-icon"></span> 
        </button> 
 
    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
      <ul class="navbar-nav mr-auto"> 
        <li class="nav-item"> 
          <a class="nav-link" href="#">Home 
                        <span class="sr-only">(current)</span> 
                    </a> 
        </li> 
        <li class="nav-item"> 
          <a class="nav-link" href="#">Link</a> 
        </li> 
        <li class="nav-item dropdown"> 
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                        Dropdown 
                    </a> 
          <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
            <a class="dropdown-item" href="#">Action</a> 
            <a class="dropdown-item" href="#">Another action</a> 
            <div class="dropdown-divider"></div> 
            <a class="dropdown-item" href="#">Something else here</a> 
          </div> 
        </li> 
      </ul> 
    </div> 
  </nav> 
  <div class="container"> 
    <h1>Change Backgroud</h1> 
    <button type="button" class="btn btn-primary" data-color="#007bff">Primary</button> 
    <button type="button" class="btn btn-success" data-color="#28a745">Success</button> 
    <button type="button" class="btn btn-danger" data-color="#dc3545">Danger</button> 
    <button type="button" class="btn btn-violet" data-color="#563d7c">Violet</button> 
    <button type="button" class="btn btn-warning" data-color="#ffc107">Warning</button> 
    <button type="button" class="btn btn-info" data-color="#17a2b8">Info</button> 
    <button type="button" class="btn btn-dark" data-color="#343a40">Dark</button> 
  </div> 
</body> 
 
</html>

Answer 1

Добавляем следующий код в JS-файл:

document.querySelector('.container').onclick = function(e) { 
  if (e.target.tagName == 'BUTTON') { 
    document.querySelector('nav').style.backgroundColor = e.target.getAttribute('data-color'); 
  } 
}
.btn-violet { 
  background-color: #563d7c; 
  color: #fff; 
} 
 
.navbar { 
  background-color: rgb(24, 18, 18); 
} 
 
.navbar-light .navbar-nav .nav-link { 
  color: #ffffff; 
} 
 
.navbar .navbar-brand { 
  color: #fff; 
} 
 
.container { 
  text-align: center; 
  padding: 0 !important; 
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" /> 
<nav class="navbar navbar-expand-lg navbar-light"> 
  <a class="navbar-brand" href="#">Navbar</a> 
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
            <span class="navbar-toggler-icon"></span> 
        </button> 
 
  <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav mr-auto"> 
      <li class="nav-item"> 
        <a class="nav-link" href="#">Home 
                        <span class="sr-only">(current)</span> 
                    </a> 
      </li> 
      <li class="nav-item"> 
        <a class="nav-link" href="#">Link</a> 
      </li> 
      <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
                        Dropdown 
                    </a> 
        <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
          <a class="dropdown-item" href="#">Action</a> 
          <a class="dropdown-item" href="#">Another action</a> 
          <div class="dropdown-divider"></div> 
          <a class="dropdown-item" href="#">Something else here</a> 
        </div> 
      </li> 
    </ul> 
  </div> 
</nav> 
<div class="container"> 
  <h1>Change Backgroud</h1> 
  <button type="button" class="btn btn-primary" data-color="#007bff">Primary</button> 
  <button type="button" class="btn btn-success" data-color="#28a745">Success</button> 
  <button type="button" class="btn btn-danger" data-color="#dc3545">Danger</button> 
  <button type="button" class="btn btn-violet" data-color="#563d7c">Violet</button> 
  <button type="button" class="btn btn-warning" data-color="#ffc107">Warning</button> 
  <button type="button" class="btn btn-info" data-color="#17a2b8">Info</button> 
  <button type="button" class="btn btn-dark" data-color="#343a40">Dark</button> 
</div>

READ ALSO
В чём проблема кода
javascript

В чём проблема кода

Написал код чтобы он при вводе двух чисел сравнивал их и говорил какое число больше или они равны, но текст с результатом не выводитсяВ чём...

 168
Как преобразовать массив в нужный мне обьект?
javascript

Как преобразовать массив в нужный мне обьект?

Есть такой массив

 173
Не могу настроить mysql
MySQL

Не могу настроить mysql

Поставил mysql с помощью brewСтолкнулся с проблемами

 236
Laravel. Mysql. Ошибка при миграции
MySQL

Laravel. Mysql. Ошибка при миграции

Текст ошибки:

 174