style css in javascript doesn't work
Question
I'm trying to create something like a little editor in javascript, but I don't understand why the .style doesn't work..
Thanks in advance for the help!
This is my code:
<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>
4 answers
solution1
2 ACCPTED 2014-05-07 18:47:35
Don't use document.write , see the warning from the spec :
Warning! This method has very idiosyncratic behavior. In some cases, this method can affect the state of the HTML parser while the parser is running, resulting in a DOM that does not correspond to the source of the document (eg if the string written is the string "
<plaintext>" or "<!--"). In other cases, the call can clear the current page first, as ifdocument.open()had been called. In yet more cases, the method is simply ignored, or throws an exception. To make matters worse, the exact behavior of this method can in some cases be dependent on network latency, which can lead to failures that are very hard to debug. For all these reasons, use of this method is strongly discouraged.
Use DOM methods instead:
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));
}
solution2
1 2014-05-07 18:43:15
尝试这个，
document.write("<h1 style='color:blue'>"+title+"</h1>");
solution3
1 2014-05-07 19:00:37
<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;
}
solution4
0 2014-05-07 18:47:51
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.