псевдоклассы и js
я так и не понял есть у js доступ к псевдоклассам css или нет? (библиотеками не пользуюсь)
|
нету. хотя может уже че придумали. Но ты можешь создать таблицу стилей и управлять ее правилами. Таким образом можно изменять свойства для псевдоклассов и псевдоэлементов из js.
|
danik.js,
Вот, например, псевдокласс :hover, в два счёта можно заменить на js. Но я хочу через style элемента добраться до его свойства background. Как всё это выглядит? Не затрагивая тег <style> вообще, всё управление из js |
Ниче не понял. Это?
<style>
div{
background: blue;
color: white;
}
div:hover{
background: red;
}
</style>
<div style="height:150px;"></div>
<script>
var div = document.querySelector('div');
setInterval(function() {
div.textContent = getComputedStyle(div).backgroundColor;
}, 100);
</script>
|
danik.js,
Неее. Но на этом примере точно поймёшь. Пусть всё так останется, но при наведении на левую половину div, background в div:hover будет red, а при наведении на правую - black. т.е. было: div:hover{ background: red; } стало: div:hover{ background: black; } но изменение значения только с помощью js. |
Дык ты пиши сразу в style элемента. Причем тут псевдокласс?
|
<div style="height:150px;"></div>
<script>
var div = document.querySelector('div');
div.addEventListener('mousemove', function(event) {
if (event.offsetX > div.offsetWidth / 2)
div.style.backgroundColor = 'black';
else
div.style.backgroundColor = 'red';
});
</script>
|
<style>
.bla{
position: relative;
height: 150px;
}
.half{
width: 50%;
height: 100%;
position: absolute;
}
.left-half{
left: 0;
}
.left-half:hover ~ .background{
background: red;
}
.right-half{
right: 0;
}
.right-half:hover ~ .background{
background: black;
}
.background{
height: 100%;
background: blue;
}
</style>
<div class="bla">
<div class="half left-half"></div>
<div class="half right-half"></div>
<div class="background"></div>
</div>
|
danik.js,
это понятно, что можно и без псевдокласса обойтись. :hover это же css событие. Вот я и думал что его как то применить в js можно. Что то вроде: div.style.hover.backgroundColor = 'black'; |
Цитата:
Класс - это всего лишь способ задать стили элементу, не более. Способ задать стили элементу из js также имеется. Через style. (стиль запишется в атрибут style, который имеет преимущество перед стилями из таблицы стилей (окромя !important)). Так чего же тебе не хватает? Вот с псевдоэлементами да, проблема. Для них действительно нет способа задавать стили из js (без манипуляции с таблицой стилей). Интересно то, что способ получать стили имеется: <style>
h3:after {
content: ' rocks!';
color: red;
}
</style>
<h3>generated content</h3>
<script>
var h3 = document.querySelector('h3'),
result = getComputedStyle(h3, ':after').color;
alert('the generated content color is: ' + result);
</script>
|
| Часовой пояс GMT +3, время: 22:17. |