Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Изменить цвет поточного эемента (https://javascript.ru/forum/misc/45694-izmenit-cvet-potochnogo-ehementa.html)

hil400k 12.03.2014 12:49
Изменить цвет поточного эемента
 
<div id="game">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
       </div>


Есть вот такой HTML код
как при помощи JS без jQ
при нажатии на элемент списка изменить его цвет???

Aetae 12.03.2014 12:58 
<style>
#game li:active{
    background: #f00;
}
</style>
<div id="game">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
</div>
:)

А вообще: 
<div id="game">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
</div>
<script>
document.getElementById('game').onclick = function(e){
    if(e.target.tagName == 'LI'){
        e.target.style.background = '#f00';
    }
}
</script>

animhotep 12.03.2014 13:00
или так)

hil400k 12.03.2014 13:00
спасибо, а можно это как-нибудь через оператор this?

animhotep 12.03.2014 13:04
а вы по ссылке смотрели? там через this

danik.js 12.03.2014 13:04 
<!DOCTYPE html>
<style>
#game li{
    background: blue;
    height: 20px;
    list-style: none;
    margin: 5px 0;
    padding: 0;
}
#game li.active{
    background: red;
}
</style>
<div id="game">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
       </div>
<script>
    document.querySelector('#game ul').onclick = function(event) {
        var target = event ? event.target : window.event.srcElement;
        if (target.tagName == 'LI')
            target.className = 'active';
    };
</script>

danik.js 12.03.2014 13:08
Чет я прослоупочил.
Ну лан, вот еще вариант:
<!DOCTYPE html>
<style>
#game li{
    background: blue;
    height: 20px;
    list-style: none;
    margin: 5px 0;
    padding: 0;
}
#game li.active{
    background: red;
}
</style>
<div id="game">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
       </div>
<script>
(function(){
	var items = document.querySelectorAll('#game li');
	var onclick = function() {
		this.className = 'active';
	}
	for (var i = 0; i < items.length; i++) {
		items[i].onclick = onclick;
	}
})();
</script>

Aetae 12.03.2014 13:09
danik.js, lol 
document.querySelector()
и
window.event.srcElement
в одном скрипте - это сильно.

hil400k 12.03.2014 13:47
спасибо всем

danik.js 12.03.2014 13:50
Цитата:
Сообщение от Aetae
в одном скрипте - это сильно.
Так то в IE8 есть qsa :yes:


Часовой пояс GMT +3, время: 17:17.