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，请参阅the spec的警告：

警告！此方法具有非常特殊的行为。在某些情况下，此方法可以影响HTML解析器的状态解析器正在运行，导致DOM与之不对应文档的来源（例如，如果写入的字符串是字符串＆＃34; <plaintext>＆＃34;或＆＃34; <!--＆＃34;）。在其他情况下，通话可以清除首先是当前页面，就像调用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 个答案: