Question

代码示例：

var msg = document.getElementById("message");

//constructor
function person(name,birthMonth,profession){
//set default values to a person
this.name = name || "No Name";
this.birthMonth = birthMonth || "No Month";
this.profession = profession || "Nobody";

    //construction of the display function
    this.display=function (){
        msg.innerHTML += "<center><p>" + this.name + " " + "was born on " + this.birthMonth + " and they are a " + this.profession + ". "

                //Month comparisons
                if (this.birthMonth=="April"){
                    msg.innerHTML += "They are meh because they were born in April.(eww)"
                }
                else if (this.birthMonth=="January"){
                    msg.innerHTML += "They are the best because they were born in the <strong>best month!</strong>"
                }
                else {
                    msg.innerHTML += "They are okay, at best."
                }
        //close paragraph tag       
        msg.innerHTML += "<hr></p></center>"
    }

}

问题：为什么if / else语句中的msg.innerHTML不在中心？中心标签不应该抓住它们吗？在HTML输出中，if / else之前的第一个语句居中。此外，小时打印正确，所以我有信心输出它。

谢谢！

Answer 1

当调用第一个innerHTML时，浏览器会自动关闭中心标记。

使用完整的消息构建一个字符串变量，然后在最后设置innerHTML - 当您关闭中心标记时，浏览器将不需要执行任何操作，您的文本将根据需要进行渲染。

this.display=function (){
var mess = '';
    mess += "<center><p>" + this.name + " " + "was born on " + this.birthMonth + " and they are a " + this.profession + ". "

            //Month comparisons
            if (this.birthMonth=="April"){
               mess += "They are meh because they were born in April.(eww)"
            }
            else if (this.birthMonth=="January"){
                mess += "They are the best because they were born in the <strong>best month!</strong>"
            }
            else {
                mess += "They are okay, at best."
            }
    //close paragraph tag     
    mess += "<hr></p></center>"
    msg.innerHTML = mess;
}

Answer 2

＆＃34; HTML5不支持该标记。请改用CSS。＆＃34; 请改用text-align: center;。

Answer 3

使用文档片段和CSS提供更快的响应

＆＃13;

var msg = document.getElementById("message");

//constructor
function person(name, birthMonth, profession) {
    //set default values to a person
    this.name = name || "No Name";
    this.birthMonth = birthMonth || "No Month";
    this.profession = profession || "Nobody";

    //construction of the display function
    this.display = function() {
    var frag = document.createDocumentFragment();
    var para = frag.appendChild(document.createElement("p"));
        para.className = "message";
        para.appendChild(document.createTextNode(this.name + " " + "was born on " + this.birthMonth + " and they are a " + this.profession + ". "));

    //Month comparisons
    if (this.birthMonth == "April") {
        para.appendChild(document.createTextNode("They are meh because they were born in April. (eww)"));
    } else if (this.birthMonth == "January") {
        para.appendChild(document.createTextNode("They are the best because they were born in the best month! "));
        var strong = para.appendChild(document.createElement("strong"));
            strong.textContent = "best month!";
    } else {
        para.appendChild(document.createTextNode("They are okay, at best."));
    }

    msg.appendChild(frag);
    };

}

var test1 = new person("Bob", "April", "Developer");
    test1.display();
var test2 = new person("Bobby", "January", "Developer");
    test2.display();
var test3 = new person("Rob", "else", "Developer");
    test3.display();

＆＃13;

.message {
  text-align: center;
}

＆＃13;

<div id="message"></div>

＆＃13;

如果函数，inner.HTML不在内部

3 个答案: