Создание текстового узла и добавление CSS

Question

Я пытаюсь создать текстовый элемент, а затем добавить атрибуты CSS

Я пытался использовать код ниже

function create(text){
  var t = document.createTextNode(text);  
  t.style.color = "black"
  t.style.backgroundColor="white"
  t.style.borderRadius="20px"
  t.style.border="4px solid black"
  document.body.appendChild(t);
}
create("hello");

Я ожидаю создать текст с белым фоном и радиусом 20px с сплошной черной рамкой 4px

Answer 1

У вас возникли проблемы, поскольку текстовые узлы не предназначены для стилизации.

Вместо этого следует создать элемент DOM.Я взял ваш код и обновил его, чтобы создать <p> (ближайший элемент текстового узла, я думаю) с вашим CSS:

function create(text) {
  var t = document.createElement('p');  
  
  t.innerText = text;
  
  t.style.color = "black"
  t.style.backgroundColor="white"
  t.style.borderRadius="20px"
  t.style.border="4px solid black"
  
  document.body.appendChild(t);
}

create("hello");

Answer 2

Вместо текстового узла, к которому я не думаю, что вы можете добавлять стили, просто используйте span вместо

function create(text){
  var t = document.createElement("span");
  t.innerText = text;  
  t.style.color = "black"
  t.style.backgroundColor="white"
  t.style.borderRadius="20px"
  t.style.border="4px solid black"
  document.body.appendChild(t);
}
create("hello");

Answer 3

Вы в правильном направлении. Единственное, что вам нужно сделать, это изменить document.createTextNode(text) на:

var t = document.createElement('span');
t.innerText = text;
\\...
document.body.appendChild(t);

Причина, по которой ваш код не работает, заключается в том, что вы можете стилизовать только теги HTML, а созданный вами текстовый узел содержит только добавленную вами строку без окружающего тега.

Например:

<span>
  hello
</span>

- это тег с некоторым текстом, а текст hello в середине - это TextNode.

Надеюсь, это имеет смысл.

Справка:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode