Как изменить текст тега 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

Answer 2

попробовать это <div style="width:100px;height=200px;border=1px solid black" >your text</div>

, чтобы сделать вашу работу Css

Answer 3

DIVs не ширина/высота/граница атрибуты. Вместо этого вы должны использовать стили. Еще лучше использовать классы 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 4

Просто замените alert(1); с функцией Javascript. Вы могли бы сделать

this.innerHTML = 'mouse in' 

и аналогично для onmouseout.

---

Что касается вашей проблемы границы, то есть, потому что вы должны вы должны сделать следующее:

style="border:1px solid black" 

как граница является CSS элемент.