如何更改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像素。

謝謝。

來源

2010-06-05 michael

什麼是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

來源

2010-06-05 22:30:27 Sampson

試試這個<div style="width:100px;height=200px;border=1px solid black" >your text</div>

，使你的CSS工作

來源

2010-06-05 22:26:17 Ayrton

這與改變文本的問題無關。 – 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'); 
    } 
});

來源

2010-06-05 22:28:00 tvanfosson

你應該提到這是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元素。

來源

2010-06-05 22:29:38 waiwai933

如何更改div標籤的文本

回答

相關問題