私は今 JavaScript を学んでいて、いくつかの素晴らしいことで遊んでいます。ボックスを大きくする関数を書くことができました。過去 30 分間、ボックスが大きくなった後にボックスにテキストを入れようとしてきました。
InnerHTML メソッドを使用してみましたが、どこに配置しても (正しい要素を参照していることはわかっています)、テキストは表示されません (色は問題なく、見えない色の問題ではありません)。
さらに奇妙なのは、InnerHTML を使用して HTML を配置すると、ボックスがまったく大きくならないことです。たとえば、入れてみましたtarget.InnerHTML = "<p style="text-align:center"> It is <b> Done </b><p>";
が、ボタンをクリックしてもボックスが大きくなりません。
そこで私が知りたい 2 つのことは、ボックスが大きくなった後にテキストをボックスに表示する方法と、HTML を入れても大きくならないのはなぜですか?
<html>
<head>
<style type="text/css">
body {
color: blue;
width: 300px;
}
#a{
color: green;
padding: 10pt;
background-color: blue;
height: 200;
}
</style>
<script type="text/javascript">
var newSetting = 200;
function growLonger(element){
target = document.getElementById(element);
target.style.height = newSetting;
target.style.width = newSetting;
newSetting = newSetting +20;
if (newSetting == 500){
clearTimeout(loopTimer);
return false;
}
var loopTimer = setTimeout('growLonger(\''+element+'\')',50);
target.InnerHTML = "<p style="text-align:center"> It is <b> Done </b><p>";
}
</script>
<title>"Test</title>
</head>
<body>
<p>Hi How are you?</p>
<button onclick="growLonger('a')"> Grow Height </button>
<div id="a">More text?</div>
</body>
</html>