关于className的问题

源自：9-17 创建文本节点createTextNode

关于className的问题

求助~，下面这个程序，为什么输出的时候，background和width，height并没有改变？？

.message{
width:200px;
height:100px;
background-color:#CCC;}

</style>
</head>
<body>
<script type="text/javascript">
document.write("输入要创建的文本<br/>");
var main1=document.getElementsByTagName("body");
main1.appendChild(creat());
function creat(){
    //   var hh=prompt("shuru");
      var innValue=document.getElementById("inn").value;
      var p=document.createElement("p");
      p.innerHTML=innValue;
      p.className="message";
      p.style.color="red";
      document.write(p.innerHTML);
}

</script>
<input id="in" type="button" onclick="creat()" value="点击创建文本"/>
<input id="inn" type="text" />
</body>

提问者：慕粉1818511579 2016-12-15 16:23

个回答

DarkAleX

2016-12-16 11:42:34

已采纳

你需要将创建的节点添加到当前的body下面，要不然在内存里面，当然没有显示效果啦。document.body.appendChild(p);

0
好我再想想

2016-12-16 11:23:12

<style type="text/css">
.message{
width:200px;
height:100px;
background-color:#CCC;}

</style>
</head>
<body>
<script type="text/javascript">
document.write("输入要创建的文本<br/>");
var main=document.body;
function creat(){
var innVaule=document.getElementById("inn").value;
var newp=document.createElement("p");
newp.innerHTML=innVaule;
newp.className="message";
newp.style.color="#c00";
main.appendChild(newp);
}
</script>
<input id="in" type="button" onclick="creat()" value="点击创建文本"/>
<input id="inn" type="text" />
</body>

0