风格CSS不提前工作

我试图创造一些像JavaScript的一个小编辑器，但我不明白为什么.style不工作..风格CSS不提前工作

感谢帮帮我！

这是我的代码：

<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>

来源

2014-05-07 Guy Solell

'document.write'是不是一个好主意使用'append'代替 – Ani

文件撰写不返回一个DOM元素。 –

为什么不使用jQuery？ – Waclock

不要使用document.write，看到警告从the spec：

警告！这种方法有非常特殊的行为。在某些情况下，此方法会影响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)); 
}

来源

2014-05-07 18:47:35 Oriol

非常感谢你！非常好的答案，帮助我很多！ =] –

试试这个，

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

来源

2014-05-07 18:43:15

'document.write'不是一个好主意 – Ejaz

请详细说明为什么你认为这个答案可能会解决问题，而不是放弃一些代码。 – nhaarman

<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>

来源

2014-05-07 18:47:51

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; 
}

来源

2014-05-07 19:00:37 tgogos

风格CSS不提前工作

回答

相关问题