javascript中的样式css无法正常工作

Question

我正在尝试在javascript中创建类似小编辑器的内容，但我不明白为什么.style无法正常工作。

先谢谢您的帮助！

这是我的代码：

<html>
<head>
    <title>Hello World!</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
    <div>
        <textarea cols="30" rows="1" id="title1">write here the header</textarea><br /><br />
        <textarea cols="30" rows="1" id="desc1">write here the paragraph</textarea>
        <input type="button" value="show" onclick="doit()">
    </div>
<script type="text/javascript">
    function doit() {
        var title = document.getElementById("title1").value;
        var desc = document.getElementById("desc1").value;
        document.write("<h1>"+title+"</h1>").style.color="blue";
        document.write(desc);
    }
</script>
</body>
 </html>

Answer 1

不要使用document.write ，请参阅规范中的警告：

警告！ 此方法具有非常特殊的行为。 在某些情况下，此方法可能会在运行解析器时影响HTML解析器的状态，从而导致DOM与文档源不对应（例如，如果写入的字符串是字符串“ <plaintext> ”或“ <!-- “）。 在其他情况下，该调用可以首先清除当前页面，就像已调用document.open()一样。 在更多情况下，该方法将被忽略或抛出异常。 更糟糕的是，在某些情况下，此方法的确切行为可能取决于网络延迟，这可能会导致很难调试的故障。 由于所有这些原因，强烈建议不要使用此方法。

改用DOM方法：

function doit() {
    var title = document.getElementById("title1").value,
        desc = document.getElementById("desc1").value,
        h1 = document.createElement('h1');
    h1.appendChild(document.createTextNode(title));
    h1.style.color="blue";
    document.body.appendChild(h1);
    document.body.appendChild(document.createTextNode(desc));
}

Answer 2

尝试这个，

document.write("<h1 style='color:blue'>"+title+"</h1>");

Answer 3

的jsfiddle

<div id="container">
<textarea cols="30" rows="1" id="title1">write here the header</textarea><br /><br />
<textarea cols="30" rows="1" id="desc1">write here the paragraph</textarea>
<input type="button" value="show" onclick="doit();" />
<h1 id="header" style="color:blue;"></h1>
<p id="par"></p>
</div>

function doit() {
var title = document.getElementById("title1").value;
var desc = document.getElementById("desc1").value;
document.getElementById('header').innerHTML=title;
document.getElementById('par').innerHTML=desc;
}

Answer 4

<script type="text/javascript">
  function doit() {
    var title = document.getElementById("title1").value;
    var desc = document.getElementById("desc1").value;

    var newheader = document.createElement("h1");
    newheader.innerHTML = "title";
    newheader.style.color = "blue";
    document.body.appendChild(newheader);

    var newspan = document.createElement("span");
    newspan.innerHTML = desc;
    document.body.appendChild(newspan);

  }
</script>

javascript中的样式css无法正常工作

问题描述

4 个解决方案

解决方案1
2 已采纳 2014-05-07 18:47:35

解决方案2
1 2014-05-07 18:43:15

解决方案3
1 2014-05-07 19:00:37

解决方案4
0 2014-05-07 18:47:51

javascript中的样式css无法正常工作

问题描述

4 个解决方案

解决方案1 2 已采纳 2014-05-07 18:47:35

解决方案2 1 2014-05-07 18:43:15

解决方案3 1 2014-05-07 19:00:37

解决方案4 0 2014-05-07 18:47:51

解决方案1
2 已采纳 2014-05-07 18:47:35

解决方案2
1 2014-05-07 18:43:15

解决方案3
1 2014-05-07 19:00:37

解决方案4
0 2014-05-07 18:47:51