Question

我有一个简单的div标签。你能否告诉我如何在我的onmouseover处理程序中将文本更改为'mouse in'？并在我的onmouseout处理程序中'鼠标'？

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

为什么宽度/高度和边框属性不起作用？我想将边框设置为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

Answer 2

DIV没有width / height / border属性。你应该使用样式。甚至可以更好地使用CSS类来设置DIV的样式。

<style type="text/css">
.message {
    width: 100px;
    height: 200px;
    border: solid 1px #000;
}
</style>

<div id="div1" class="message">test</div>

您可能还想考虑使用jQuery悬停方法而不是mousein / out。虽然有时候mousein / out更合适，但我发现通常需要的行为是悬停效果。这与使用JS框架（如jQuery）的浏览器无关方式最容易处理。

 $('#div1').hover( function() {
       $(this).text('mouse in');
   },
   function() {
       $(this).text('mouse out');
   }
 });

Answer 3

试试这个<div style="width:100px;height=200px;border=1px solid black" >your text</div>

让你的CSS工作

Answer 4

只需使用Javascript函数替换alert(1);即可。你可以做到

this.innerHTML = 'mouse in'

，同样适用于onmouseout。

<小时/> 至于你的边界问题，那是因为你必须要做以下事情：

style="border:1px solid black"

因为border是一个CSS元素。

如何更改div标签的文本

4 个答案: