Можно ли ? ::before ::arfter

117

06 августа 2019, 22:50

Подскажите, можно ли достучатся из js к псевдоэлементам DOMa?

Answer 1

Ну если прям очень сильно захотеть, то можно узнать какое-либо свойство:

var style = getComputedStyle(document.getElementById('foo'), ':before'); 
console.log(style.content);

#foo::before { 
  content: 'Hello world'; 
  color: red; 
}

<div id="foo">Click me</div>

Answer 2

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

'use strict'; 
 
( function () { 
 
    var 
            selectorText = '.button::before', 
            button = document.getElementById( 'button' ), 
            color = [ 'rgba(255, 255, 255, 0.2)', 'rgba(73, 255, 59, 0.4)' ], 
            colorInd = 0; 
 
    // Поиск селектора 
    var styleSheetList = document.styleSheets, selectorStyle; 
 
    [ ].forEach.call( styleSheetList, function ( CSSStyleSheet ) { 
        for ( var i = 0; i < CSSStyleSheet.rules.length; ++i ) { 
            if ( CSSStyleSheet.rules[i].selectorText === selectorText ) { 
                selectorStyle = CSSStyleSheet.rules[i].style; 
                return; 
            } 
        } 
    } ); 
 
    if ( !selectorStyle ) { 
        return; 
    } 
     
    // Теперь и далее - 
    //    можем использовать нашу ссылку, например для изменения фона 
    button.addEventListener( 'click', function () { 
        selectorStyle.backgroundColor = colorInd ? color[--colorInd] : color[++colorInd]; 
    } ); 
 
} )();

.button { 
    display: inline-block; 
    box-sizing: border-box; 
    position: relative; 
    margin: 4px; 
    width: 200px; 
    height: 100px; 
    line-height: 100px; 
    color: #fff; 
    font-size: 26px; 
    font-family: sans-serif; 
    text-align: center; 
    border-radius: 4px; 
    border-color: #9caab9; 
    background-image: linear-gradient(rgb(124, 138, 153), rgb(108, 122, 137)); 
    box-shadow: 0px 1px 4px 1px rgba(60, 74, 89, 0.6); 
    overflow: hidden; 
    user-select: none; 
} 
 
/* этим элементом будем манипулировать */ 
.button::before { 
    content: ''; 
    position: absolute; 
    width: 0%; 
    height: 100%; 
    top: 0; 
    left: 50%; 
    background-color: rgba(255,255,255,0.2); 
    transition-property: left width; 
    transition-duration: 200ms; 
} 
 
.button:hover::before { 
    left: 0; 
    width: 100%; 
}

<!DOCTYPE html> 
<html> 
    <head> 
        <title>title</title> 
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <style> 
            /* для примера, она здесь не нужна, но как будто таблиц много */ 
            body { 
                margin: 20px; 
                font-family: monospace; 
            } 
        </style> 
    </head> 
    <body> 
        <div class="button" id="button">button</div> 
        При клике меняем цвет псевдоэлемента 
    </body> 
</html>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как выполнить клик по кнопки если пользователь зашел на сайт с мобильного?

Как выполнить авто клик по кнопке если пользователь зашел на сайт с мобильного ? Вот код кнопки : <button onclick="hideme(this)" class="close">X - Закрыть эти...

129

javascript

Как веб-страница получает информацию о DNS?

Вот читал вопрос и возник новыйКак на веб-странице определить используемые dns сервера? Есть какое-то апи на яваскрипт? Как отключить эту возможность?

128

javascript

Выдает ошибку при создание регистрации Android Studio

Сделал форму регистрации через Android Studi но при проверке выдает такую ошибку

144

javascript

Slider Pro в css табах

Нашел замечательный слайдер "Slider Pro" но не удается поместить его в css табы в первом табе слайдер отображается хорошо, а вот в последующих табах...

128