Делаю панельку с соц. кнопками с помощью спрайтов, после верстки надо было сделать открытие ссылки при клике на иконку, так как сейчас учу js, решил попрактиковаться на нем. Такой вот код не работает:
body {
background-color: lavender;
}
.icons_main_class {
list-style: none;
margin: 0;
padding: 0;
margin-right: 10px;
text-align: right;
}
.icons_main_class li{
background-image: url(https://image.flaticon.com/sprites/share/packs/174834-social-media-logos.png);
display: inline-block;
padding: 0;
margin: 0;
width: 32px;
height: 32px;
background-size: 13rem;
border-radius: 5px;
}
.icons_main_class li:hover {
cursor: pointer;
}
.social1 {
background-position: 20% -0.3%;
}
.social2 {
background-position: 40% 0;
}
.social3 {
background-position: 99% 0;
}
<!DOCTYPE html>
<ul class="icons_main_class">
<li class="social1" id='check' onclick="document.getElementById('check').window.open('https://google.com');"></li>
<li class="social2"></li>
<li class="social3"></li>
</ul>
</html>
Но если написать просто так, то все работает:
<ul class="icons_main_class">
<li class="social1" onclick="window.open('https://google.com');"></li>
<li class="social2"></li>
<li class="social3"></li>
</ul>
Собственно интересно, почему в данном случае не нужно получать доступ по id (и он тоже вообще не нужен) через GetElementByID? В каких случаях его нужно использовать (если обращаться не к текущему элементу)?
Если использовать
<ul class="icons_main_class">
<li class="social1" id='check' onclick="document.getElementById('check').innerHTML = 'some text';"></li>
<li class="social2"></li>
<li class="social3"></li>
</ul>
то все также работает, разница в том что для innerHTML нужно знать что содержит элемент, чтобы в нем написать нечто или как?
И последний вопрос - есть ли разница между использованием onclick="document.getElementById('check').innerHTML = 'some text';"
вместо onclick="this.innerHTML = 'some text';"
? Работают они одинаково, но не понимаю разницы между всем этим, что когда нужно/можно/лучше использовать...
this
это грубо говоря текущий элемент,getElementById
стоит понимать буквально, это метод который ищет и берет элемент по указанному id – yolosora 13 мар '18 в 19:39