javascript - 如何更改div标签的文本

Question

我有一个简单的 div 标签。你能告诉我如何在我的 onmouseover 处理程序中将文本更改为“鼠标进入”吗？和我的 onmouseout 处理程序中的“鼠标移出”？

<div id="div1" onmouseover="alert(1);" width="100px" height="200px" border="1">
test
</div>

为什么 width/height 和 border 属性不起作用？我想将边框设置为 1 个像素，宽度 = 100 像素，高度 = 200 像素。

谢谢。

Answer 1

对于您的 CSS，添加以下内容:

/* Using inline-block so we can set w/h while letting elements
   flow around our div */
#div1 { display:inline-block; 
        width:100px; height:200px; 
        border:1px solid #000; }

对于您的 Javascript:

/* We start wit a reference to the element via its ID */
var myDiv = document.getElementById("div1");
/* Then we add functions for our events */
myDiv.onmouseover = function() { this.innerHTML = 'mouse over'; }
myDiv.onmouseout  = function() { this.innerHTML = 'mouse out'; }

这给我们留下了非常干净和简约的标记:

<div id="div1">Hover Me!</div>

Online Demonstration