如何更改div标签的文本

问题描述：

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

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

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

谢谢。

什么是T.他的边界与什么有关？ – bmargulies 2010-06-05 22:28:18

答

对于你的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

答

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

，使你的CSS工作

这与改变文本的问题无关。 – bmargulies 2010-06-05 22:27:30

@bmargulies - 他也会问为什么（不支持的）属性不起作用。 – tvanfosson 2010-06-05 22:28:41

答

的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悬停方法而不是mousein/out。虽然有些时候mousein/out更合适，但我发现通常需要的行为是悬停效果。这是使用JS框架（如jQuery）以独立于浏览器的方式处理的最简单方法。

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

你应该提到这是jQuery，而不是标准的javascript;） – 2010-06-05 22:35:08

@Tim - 我做到了。你必须在编辑之间抓住它。 – tvanfosson 2010-06-06 11:59:54

答

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

this.innerHTML = 'mouse in'

和类似的onmouseout。

至于你的问题的边界，那是因为你必须你必须做到以下几点：

style="border:1px solid black"

边境是一个CSS元素。

如何更改div标签的文本

相关推荐