如何设置 document.documentElement.innerHTML = 'TEXT' 的对齐方式；答案

【问题标题】：How to set align of document.documentElement.innerHTML = 'TEXT';如何设置 document.documentElement.innerHTML = 'TEXT' 的对齐方式；
【发布时间】：2018-09-06 10:18:06
【问题描述】：

我想要使用 document.documentElement.innerHTML = 'TEXT'; 创建文本的代码元素，但我不知道如何将其居中。我可以使用 CSS 还是更好地使用 HTML 中的任何函数？我在脚本中使用了一些循环，但我现在想将它设置在页面中心.. 当我尝试用它做任何事情时，每次都失败了。因为我不知道我必须从哪里开始“对齐”文本。

@CHARSET "UTF-8";
.script-class {
    width: 70px;
    height: 300px;
    border: 1px solid #c3c3c3;
    
    -webkit-align-content: center;
}

h1 {
    color: navy;
    margin-left: 20px;
}

#page-wrap {
     width: 800px;
     margin: 0 auto;
}

<!DOCTYPE html>
<html>
<head>
    <title>Projekt 1</title>
    <link rel="stylesheet" type="text/css" href="style_menu.css">
</head>

<body>
<p id="demo"></p>
<div id="page-wrap">

<script class="script-class">
    for(var i=0; i<10; i++) {
      console.log('Ok');
      update();
      //Code here
    }
   
    function update(){
      var delayInMilliseconds = 500; //1 second                        
      setTimeout(function() {
        //your code to be executed after 1 second
        console.log('Ok bro');
        document.documentElement.innerHTML = 'TEXT';
        new Audio('http://xehos.cz/testy/13290__schademans__pipe9.wav').play()
        reflush();
      }, delayInMilliseconds);
    }

    function reflush(){
      var delayInMilliseconds = 200; //1 second
      setTimeout(function() {
        //your code to be executed after 1 second
        console.log('Reflushed');
        document.documentElement.innerHTML = '';
        update();
      }, delayInMilliseconds);
    }
</script>

</div>
</body>
</html>

感谢您的帮助，亚当

【问题讨论】：

这段代码的目的是什么？？！！ ...您正在搞砸所有的 html，而正文中只有文本
对于初学者，document.documentElement.innerHTML = 'TEXT'; 会将您网页的全部内容替换为“TEXT”。这可能不是你想要的。您的示例代码中还有太多不相关的部分，其中一半我不知道它应该完成什么。我建议您对 CSS 基础知识进行一些研究。 MDN 有不错的资料：developer.mozilla.org/en-US/docs/Web/CSS
只需给它一个类并将文本放在你的 css 上

标签： javascript html css text alignment

【解决方案1】：

html {
    text-align: center
}

在你的 CSS 中

编辑：或者，在您的 JS 中，将 文档中的所有内容替换为您的文本后，您可以这样做

document.documentElement.style["text-algin"] = "center";

【讨论】：

立即投反对票，不予置评。请告诉我为什么
我没有投票，但您正试图将 DOM 中的每个文本对齐为中心。这个问题不问这个
问题中的代码立即用文本替换了根元素，即 html 元素。如果提问者有办法在根元素之外包含 css，那么这将是唯一可行的方法。
The code in the question instantly replaces the root element --> 所以代码有一个很大的问题，我不认为提供这样的居中是一个好主意，因为代码很糟糕......我们首先需要修复代码然后正确使用 CSS
我刚刚回答了他们提出的问题。

【解决方案2】：

也许是这样的：

var wrap = document.createElement('p');
wrap.innerHTML = "TEXT";
wrap.style["text-align"] = "center";
document.body.appendChild(wrap);

你也可以给它一个带有wrap.id = "id"的ID来改变reflush函数中的内容：

function reflush(){
  document.getElementById('myId').innerHTML = "";

}

【讨论】：

【解决方案3】：

在您的代码应该可以工作之后添加document.documentElement.style.textAlign = “center”;。它通过 JavaScript 访问元素 css 并将 text-align 设置为 center。

【讨论】：