Как стилизовать элемент, созданный с помощью JavaScript

Question

Я пытаюсь стилизовать текстовое поле, созданное с помощью JavaScript, назначив идентификатор для созданного элемента следующим образом:

const x = document.createElement("INPUT");
x.setAttribute("type", "text");
document.getElementById("textBoxForText").appendChild(x);
window.data.appendChild(x);

Это мой CSS:

.textBox {
  border: 2px solid red;
  border-radius: 4px;
}

В моем HTML файле я пытался вызвать элемент по его идентификатору, но это не сработало:

 <div id="textBoxForText" class = "textBox"></div>

Как я могу решить эту проблему? Я ищу решение, которое позволяет избежать использования внутреннего HTML, если это возможно.

Answer 1

Используйте атрибут class -

const p =
  document.createElement("p")
  
const t =
  document.createTextNode("this is a styled paragraph")
  
p.setAttribute("class", "textbox") // <--
p.appendChild(t)
document.body.appendChild(p)

.textbox {             /* class selector, .textbox */
  padding: 1rem;
  color: tomato;
  border: 1px solid;
  border-radius: 5px;
}

Или используйте атрибут id -

const p =
  document.createElement("p")
  
const t =
  document.createTextNode("this is a styled paragraph")
  
p.setAttribute("id", "textbox") // <--
p.appendChild(t)
document.body.appendChild(p)

#textbox {           /* id selector, #textbox */
  padding: 1rem;
  color: tomato;
  border: 1px solid;
  border-radius: 5px;
}

Или используйте атрибут style -

const camelToHyphen = (s = "") =>
  s.replace
    ( /([A-Z])/g
    , (_, m) => `-${m.toLowerCase()}`
    )

const toCss = (o = {}) =>
  Object
    .entries(o)
    .map(([ k, v ]) =>
      `${camelToHyphen(k)}:${v};`
    )
    .join("")

const textbox = {      /* javascript object, textbox */
  padding: "1rem",
  color: "tomato",
  border: "1px solid",
  borderRadius: "5px",
}

const p =
  document.createElement("p")
  
const t =
  document.createTextNode("this is a styled paragraph")
  
p.setAttribute("style", toCss(textbox)) // <-- 
p.appendChild(t)
document.body.appendChild(p)

Answer 2

Скрипт загружается раньше div с id? Как насчет загрузки скрипта после. Используйте отложенный или асинхронный c