如何更改 div 标签的文本答案

【问题标题】：How to change the text of a div tag如何更改 div 标签的文本
【发布时间】：2010-06-05 22:24:19
【问题描述】：

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

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

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

谢谢。

【问题讨论】：

边框跟什么有什么关系？

标签： javascript html

【解决方案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

【讨论】：

【解决方案2】：

DIV 没有宽度/高度/边框属性。您应该改用样式。更好地使用 CSS 类来设置 DIV 样式。

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

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

您可能还想考虑使用 jQuery hover 方法而不是 mousein/out。虽然有时鼠标输入/输出更合适，但我发现通常需要的行为是悬停效果。使用 JS 框架（如 jQuery）以独立于浏览器的方式最容易处理。

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

【讨论】：

你应该提到这是 jQuery 而不是标准的 javascript ;)

【解决方案3】：

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

让你的 CSS 工作

【讨论】：

这与修改文字的问题无关。
@bmargulies - 他也问为什么（不受支持的）属性不起作用。

【解决方案4】：

只需将 alert(1); 替换为 Javascript 函数即可。你可以这样做

this.innerHTML = 'mouse in'

onmouseout 也是如此。

至于您的边界问题，那是因为您必须执行以下操作：

style="border:1px solid black"

因为边框是一个 CSS 元素。

【讨论】：