Форум

hil400k · #1 (**permalink**) 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 · #2 (**permalink**) 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 · #3 (**permalink**) 12.03.2014, 13:00

или так)

hil400k · #4 (**permalink**) 12.03.2014, 13:00

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

animhotep · #5 (**permalink**) 12.03.2014, 13:04

а вы по ссылке смотрели? там через this

danik.js · #6 (**permalink**) 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 · #7 (**permalink**) 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 · #8 (**permalink**) 12.03.2014, 13:09

danik.js, lol

document.querySelector()

и

window.event.srcElement

в одном скрипте - это сильно.

hil400k · #9 (**permalink**) 12.03.2014, 13:47

спасибо всем

danik.js · #10 (**permalink**) 12.03.2014, 13:50

Сообщение от Aetae

в одном скрипте - это сильно.

Так то в IE8 есть qsa

Форум

Справочник

Discord чат

Курсы javascript