Как установить несколько атрибутов на один и тот же элемент

Question

Мне нужна помощь.

Я создаю игровое поле для судоку, и мне нужно нарисовать несколько линий, чтобы разделить поля 3x3. Доска состоит из кнопок, поэтому я пытаюсь изменить цвет границы кнопок в 3-м и 6-м столбцах и строке.

Проблема, с которой я столкнулся, заключается в том, что я не могу добавить к кнопке 2 границы: правую и нижнюю. Код Js добавляет только один атрибут за раз, используя elem.setAttribute. Итак, я попробовал функцию, которая якобы позволяет добавить более одного атрибута, но, похоже, она не работает.

Где ошибка?

Я ценю вашу помощь!

function createGameboard() {
  var gameboard = document.getElementById("gameboard");
  console.log("creating buttons");
  for (var i = 1; i <= 9; i++) {
    for (var j = 1; j <= 9; j++) {
      var button = document.createElement("button");
      button.id = i + "-" + j;
      button.className = "buttons";
      button.innerHTML =  i + "-" + j;
      if (i == 3 || i == 6) {
        button.setAttribute("style", "border-bottom: 4px solid black");
      }
      if (j == 3 || j == 6) {
        button.setAttribute("style", "border-right: 4px solid black");
      }
      if (
        (i == 3 && j == 3) ||
        (i == 6 && j == 6) ||
        (i == 3 && j == 6) ||
        (i == 6 && j == 3)
      ) {
        setAttributes(button, {
          "border-right": "4px solid black",
          "border-bottom": "4px solid black",
        });
      }
      gameboard.appendChild(button);
    }
  }
}
createGameboard();

function setAttributes(el, attrs) {
  for (var key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
}

body {
  background-color: #0f4c5c;
}

h1,
h5 {
  color: white;
}

.sudoku #gameboard {
  width: 40vmin;
  height: 40vmin;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0;
}

.sudoku button {
  width: 10vmin;
  height: 10vmin;
  background: white;
  border: 3px solid gray;
  margin: 0;
}

  <body>
    <div class="container">
      <div class="col">
        <h1 class="row mx-auto my-3" id="title">
          Sudoku
        </h1>
        <div class="row my-2 container sudoku">
          <div class="gameboard" id="gameboard"></div>
        </div>
        </div>
      </div>
    </div>
  </body>

javascript setattribute

2

Ale.X.L 19 Янв 2022 в 19:47

Answer 1

Если вы используете только setAttribute для стиля, вы можете исправить это следующим образом:

function setAttribute(element, key, value) {
    element.style[key] = value
}

setAttribute(document.body, "backgroundColor", "red")

Обратите внимание, что вам нужно использовать версию стиля javascript (backgroundColor вместо background-color).

2

Kokodoko 19 Янв 2022 в 19:54

Большое спасибо! Это решило мою проблему :)

–

Ale.X.L

19 Янв 2022 в 20:02

Answer 2

Это потому, что вы переопределяете атрибут. Вы должны объединить атрибуты. как это:

const d = document.querySelector('button')
console.log('before',d)

d.setAttribute("style", "border-bottom: 4px solid green;")
_tmp = d.getAttribute("style")
d.setAttribute("style", _tmp + " border-right: 4px solid black")

console.log('after', d)

<button>1</button>

0

Maik Lowrey 19 Янв 2022 в 19:59

Answer 3

Я использую эту функцию не только для стилизации, но и для добавления/удаления класса.

const setAttributes = (el, object) => {
  for (let key in object) {
    if (key === "addClass") {
      el.classList.add(object[key]);
    } else if (key === "removeClass") {
      el.classList.remove(object[key]);
    } else {
      el.setAttribute(key, object[key]);
    }
  }
};

Использование довольно простое:

setAttributes(cBtn, {
  class: `${this.prefix}-clear hidden`,
  type: "button",
  "aria-label": this.clearBtnAriLabel,
});

0

Grzegorz T. 19 Янв 2022 в 20:05

Как установить несколько атрибутов на один и тот же элемент

3 ответа

Похожие вопросы

Новые вопросы

javascript