Как использовать JavaScript для изменения цвета фона div
https://stackoverflow.com/questions/1874560
-
18-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
HTML ниже:
<div id="catestory">
<div class="content">
<h2>some title here</h2>
<p>some content here</p>
</div>
<div class="content">
<h2>some title here</h2>
<p>some content here</p>
</div>
<div class="content">
<h2>some title here</h2>
<p>some content here</p>
</div>
</div>
При наведении курсора мыши на содержимое div изменяется фоновый цвет и фоновый цвет h2 (внутри этого div) (точно так же, как CSS: hover)
Я знаю, что для этого можно использовать CSS (:hover) в современном браузере, но IE6 не работает.
Как использовать для этого JavaScript (а не jQuery или другую среду JS)?
Изменить: как изменить фоновый цвет h2 тоже
Решение
var div = document.getElementById( 'div_id' );
div.onmouseover = function() {
this.style.backgroundColor = 'green';
var h2s = this.getElementsByTagName( 'h2' );
h2s[0].style.backgroundColor = 'blue';
};
div.onmouseout = function() {
this.style.backgroundColor = 'transparent';
var h2s = this.getElementsByTagName( 'h2' );
h2s[0].style.backgroundColor = 'transparent';
};
Другие советы
Добавление/изменение стиля элементов в коде — плохая практика.Сегодня вы хотите изменить фон цвет а завтра ты захочешь сменить фон изображение а после завтра ты решил, что было бы неплохо еще и поменять граница.
Редактировать код каждый раз только потому, что меняются требования к дизайну, — это боль.Кроме того, если ваш проект будет расти, изменение js-файлов будет еще более болезненным.Больше кода, больше боли.
Постарайтесь исключить использование жестко запрограммированных стилей, это сэкономит вам время, и, если вы все сделаете правильно, вы сможете попросить выполнить задачу «изменить цвет» кого-нибудь другого.
Таким образом, вместо прямого изменения свойств стиля вы можете добавлять/удалять классы CSS на узлах.В вашем конкретном случае вам нужно сделать это только для родительского узла - «div», а затем оформить подузлы с помощью CSS.Поэтому нет необходимости применять определенное свойство стиля к DIV и H2.
Еще один рекомендательный момент.Постарайтесь не соединять узлы жестко закодированными, а используйте для этого некоторую семантику.Например:«Чтобы добавить события ко всем узлам, имеющим класс «контент».
В заключение, вот код, который я бы использовал для таких задач:
//for adding a css class
function onOver(node){
node.className = node.className + ' Hover';
}
//for removing a css class
function onOut(node){
node.className = node.className.replace('Hover','');
}
function connect(node,event,fnc){
if(node.addEventListener){
node.addEventListener(event.substring(2,event.length),function(){
fnc(node);
},false);
}else if(node.attachEvent){
node.attachEvent(event,function(){
fnc(node);
});
}
}
// run this one when window is loaded
var divs = document.getElementsByTagName("div");
for(var i=0,div;div =divs[i];i++){
if(div.className.match('content')){
connect(div,'onmouseover',onOver);
connect(div,'onmouseout',onOut);
}
}
И ваш CSS должен быть таким:
.content {
background-color: blue;
}
.content.Hover{
background-color: red;
}
.content.Hover h2{
background-color : yellow;
}
Получите доступ к элементу, который вы хотите изменить, через DOM, например, с помощью document.getElementById() или через this в обработчике событий и измените стиль этого элемента:
document.getElementById("MyHeader").style.backgroundColor='red';
РЕДАКТИРОВАТЬ
Вы можете использовать getElementsByTagName тоже (непроверенный) пример:
function colorElementAndH2(elem, colorElem, colorH2) {
// change element background color
elem.style.backgroundColor = colorElem;
// color first contained h2
var h2s = elem.getElementsByTagName("h2");
if (h2s.length > 0)
{
hs2[0].style.backgroundColor = colorH2;
}
}
// add event handlers when complete document has been loaded
window.onload = function() {
// add to _all_ divs (not sure if this is what you want though)
var elems = document.getElementsByTagName("div");
for(i = 0; i < elems.length; ++i)
{
elems[i].onmouseover = function() { colorElementAndH2(this, 'red', 'blue'); }
elems[i].onmouseout = function() { colorElementAndH2(this, 'transparent', 'transparent'); }
}
}
<script type="text/javascript">
function enter(elem){
elem.style.backgroundColor = '#FF0000';
}
function leave(elem){
elem.style.backgroundColor = '#FFFFFF';
}
</script>
<div onmouseover="enter(this)" onmouseout="leave(this)">
Some Text
</div>
Это может показаться немного странным, потому что я на самом деле не серьезный программист и открываю для себя вещи в программировании так же, как был изобретен пенициллин - чистая случайность.Итак, как изменить элемент при наведении курсора мыши?Использовать :hover атрибут так же, как и с a элементы.
Пример:
div.classname:hover
{
background-color: black;
}
Это меняет любое div с классом classname чтобы при наведении курсора мыши был черный фон.По сути, вы можете изменить любой атрибут.Протестировано в IE и Firefox.
Приятного программирования!
Если вы хотите вставить несемантические узлы в свой документ, вы можете сделать это только CSS-совместимым с IE способом, обернув свои элементы div в поддельные теги A.
<style type="text/css">
.content {
background: #ccc;
}
.fakeLink { /* This is to make the link not look like one */
cursor: default;
text-decoration: none;
color: #000;
}
a.fakeLink:hover .content {
background: #000;
color: #fff;
}
</style>
<div id="catestory">
<a href="#" onclick="return false();" class="fakeLink">
<div class="content">
<h2>some title here</h2>
<p>some content here</p>
</div>
</a>
<a href="#" onclick="return false();" class="fakeLink">
<div class="content">
<h2>some title here</h2>
<p>some content here</p>
</div>
</a>
<a href="#" onclick="return false();" class="fakeLink">
<div class="content">
<h2>some title here</h2>
<p>some content here</p>
</div>
</a>
</div>
Чтобы сделать это без jQuery или любой другой библиотеки, вам нужно прикрепить события onMouseOver и onMouseOut к каждому элементу div и изменить стиль в обработчиках событий.
Например:
var category = document.getElementById("catestory");
for (var child = category.firstChild; child != null; child = child.nextSibling) {
if (child.nodeType == 1 && child.className == "content") {
child.onmouseover = function() {
this.style.backgroundColor = "#FF0000";
}
child.onmouseout = function() {
// Set to transparent to let the original background show through.
this.style.backgroundColor = "transparent";
}
}
}
Если ваш h2 не установил собственный фон, фон div будет виден и тоже раскрасит его.
Вы можете попробовать этот скрипт.:)
<html>
<head>
<title>Div BG color</title>
<script type="text/javascript">
function Off(idecko)
{
document.getElementById(idecko).style.background="rgba(0,0,0,0)"; <!--- Default --->
}
function cOn(idecko)
{
document.getElementById(idecko).style.background="rgb(0,60,255)"; <!--- New content color --->
}
function hOn(idecko)
{
document.getElementById(idecko).style.background="rgb(60,255,0)"; <!--- New h2 color --->
}
</script>
</head>
<body>
<div id="catestory">
<div class="content" id="myid1" onmouseover="cOn('myid1'); hOn('h21')" onmouseout="Off('myid1'); Off('h21')">
<h2 id="h21">some title here</h2>
<p>some content here</p>
</div>
<div class="content" id="myid2" onmouseover="cOn('myid2'); hOn('h22')" onmouseout="Off('myid2'); Off('h22')">
<h2 id="h22">some title here</h2>
<p>some content here</p>
</div>
<div class="content" id="myid3" onmouseover="cOn('myid3'); hOn('h23')" onmouseout="Off('myid3'); Off('h23')">
<h2 id="h23">some title here</h2>
<p>some content here</p>
</div>
</div>
</body>
<html>
Это очень просто: используйте функцию на JavaScript и вызовите ее по щелчку мыши.
<script type="text/javascript">
function change()
{
document.getElementById("catestory").style.backgroundColor="#666666";
}
</script>
<a href="#" onclick="change()">Change Bacckground Color</a>
