псевдоклассы и js

[BratKilla]

я так и не понял есть у js доступ к псевдоклассам css или нет? (библиотеками не пользуюсь)

[danik.js]

нету. хотя может уже че придумали. Но ты можешь создать таблицу стилей и управлять ее правилами. Таким образом можно изменять свойства для псевдоклассов и псевдоэлементов из js.

[BratKilla]

danik.js,
Вот, например, псевдокласс :hover, в два счёта можно заменить на js. Но я хочу через style элемента добраться до его свойства background. Как всё это выглядит? Не затрагивая тег <style> вообще, всё управление из js

[danik.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>

[BratKilla]

danik.js,
Неее. Но на этом примере точно поймёшь. Пусть всё так останется, но при наведении на левую половину div, background в div:hover будет red, а при наведении на правую - black.

т.е. было:
div:hover{
background: red;
}

стало:
div:hover{
background: black;
}

но изменение значения только с помощью js.

[danik.js]

Дык ты пиши сразу в style элемента. Причем тут псевдокласс?

[danik.js]

<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>

[danik.js]

<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>

[BratKilla]

danik.js,
это понятно, что можно и без псевдокласса обойтись.
:hover это же css событие. Вот я и думал что его как то применить в js можно. Что то вроде:

div.style.hover.backgroundColor = 'black';

[danik.js]

:hover это же css событие

Это не событие. Это псевдокласс. Можешь себе представить что это просто класс, будто бы .hover, только браузер его как-бы сам добавляет при наведении на элемент мышки, и убирает когда уводишь. Ну и вместо одной точки - две точки. То есть разницы то практически нет.

Класс - это всего лишь способ задать стили элементу, не более.
Способ задать стили элементу из 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>