Создать кнопку, которая будут изменять заголовок h1 c id title (делать его больше/меньше и менять его цвет)

Question

Вот код, который желательно взять за основу:

    <!DOCTYPE html>
    <html>

    <head>
      <title>Document</title>
      <meta charset="UTF-">
      <style>
        #box {
          width: 200px;
          height: 60px;
          background-color: violet;
          /* df */
          display: flex;
          /* jcc */
          justify-content: center;
          /* aic */
          align-items: center;
          /* fz15 */
          font-size: 15px;
          border-radius: 5px;
          /* mb20 */
          margin-bottom: 20px;
          /* fwb */
          font-weight: bold;
          /* ff-m */
          font-family: monospace;
          color: white;
          text-shadow: 1px 1px 1px black;
          user-select: none;
        }
      </style>
    </head>

    <body>
      <div id='box'></div>

      <script>
        const box = document.getElementById('box');
        box.style.background = 'red'
        box.onclick = function() {
          let color = box.style.background;
          if (color == 'red') {
            box.style.background = 'dodgerblue';
            box.textContent = 'Закрыть';
          } else {
            box.style.background = 'red';
            box.textContent = 'Открыть';
          }
        }
      </script>>

    </body>

    </html>

            const box = document.getElementById('box');
            box.style.background = 'red'
            box.onclick = function(){
                let color = box.style.background;
                  if (color == 'red') {
                    box.style.background = 'dodgerblue';
                    box.textContent = 'Закрыть';
                } else {
                    box.style.background = 'red';
                    box.textContent = 'Открыть';
                }
            }

        #box {
                width: 200px;
                height: 60px;
                background-color: violet;
                /* df */
                display: flex;
                /* jcc */
                justify-content: center;
                /* aic */
                align-items: center;
                /* fz15 */
                font-size: 15px;
                border-radius: 5px;
                /* mb20 */
                margin-bottom: 20px;
                /* fwb */
                font-weight: bold;
                /* ff-m */
                font-family: monospace;
                color: white;
                text-shadow: 1px 1px 1px black;
                user-select: none;  
            }

        <div id='box'></div>

Answer 1

просто создайте 2 стиля (2 класса) и меняйте один на другой для одного блока когда будете нажимать на другой блок

const button = document.querySelector('#button');

button.onclick = function(){
  const text = document.querySelector('#text');
  
  text.classList.toggle('text1');
  text.classList.toggle('text2');
}

#button {
  width:    100px;
  height:   50px;
  
  margin-bottom:  15px;
  
  background:   #d00000;
  color:        white;
  
  font-size:    18px;
  line-height:  50px;
  text-align:   center;
  
  cursor:       pointer;
}

#text {
  width:      100%;
  height:     50px;
  
  line-height:  50px;
  text-align:   center;  
}

.text1 {
  color:      white;
  background:  black;
  
  font-size:  10px;
}

.text2 {
  color:      black;
  background:  orange;
  
  font-size:  20px;
}

<div id = 'button'>ЖМИ</div>
<div id = 'text' class = 'text1'>Какой-то текст для какой-то кнопки</div>

БЛОГ НА HUSL

Создать кнопку, которая будут изменять заголовок h1 c id title (делать его больше/меньше и менять его цвет)

Ответы (1 шт):