Удаляет ли document.write стиль css?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь запустить скрипт, не удаляя стиль CSS.

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

 function myFunc() {
  document.write(Math.floor(Math.random() * 999));
}

 body {
  background-color: blue;
}

 <button onclick="myFunc()">Get random num</button>

1. Да, при таком использовании document.write() очищает весь документ. Что является основной причиной не использовать его. Добавьте элемент вывода like <pre id="output"></pre> , затем используйте document.getElementById('output').innerText = x; вместо

Ответ №1:

Поместите значение внутри другого элемента вместо создания нового документа.

Попробуйте:

 let s = document.createElement("span");
s.innerHtml = Math.floor(Math.random()*999);
body.appendChild(s);

Редактировать:
Я не видел, чтобы @Chris G ответил на ваш вопрос, но здесь немного другой подход с созданием нового элемента для каждого случайного вместо его замены. Я думаю, его ответ подходит вам лучше.

Ответ №2:

это не очень хорошая практика

Вы можете попробовать это

 <!DOCTYPE html>
<html lang="">
<head>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <style>
    body{
  background-color: blue;
}
  </style>
</head>
<body>
  <p id="text"> </p>
  <button onclick="myFunc()">Get random num</button>
  <script>

     function myFunc(){
document.getElementById("text").innerHTML=( Math.floor(Math.random()*999));
}
  </script>
</body>
</html>

1. Поскольку вы говорите о хорошей практике (и вы правы, document.write не является хорошей практикой), лучше использовать .innerText вместо .innerHTML , если вы не добавляете никакой разметки, как в вашем случае. Кстати, ваш выбор цвета нечитаем. Как насчет background-color: wheat; ?

Ответ №3:

Да, как только вы нажмете на кнопку, ваш html-код изменится на:

 <html><head></head><body>934</body></html>

Он также удаляет стиль.

Согласно ссылке

Ответ №4:

Да, это так. Это потому document.write() , что перезаписывает все style link элементы и, которые могут присутствовать в документе. document.write() полностью перезаписывает все в документе.

Пример:

 function doIt() {
  document.write('text')
  
  doSomethingElse() // Will not get executed since the script tags have been removed
}

 <button onclick='doIt()'>Use document.write</button>