JavaScript

CSS и JS Как сменить width d псевдоклассe ::before через js

p::before{
content: ' ';
width:5px;
}

Нужно через js задать width yfghbvth 150px;
Илюха Криушков
Илюха Криушков
77
Некоторые недоучки говорят что это невозможно Всё возможно И это лишь один из способов это сделать Все секреты открывать не стану но классы подобны DOM и их напрямую можно изменять!

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
       <style id="sty">
        p::before {
            content: '*';
            width: 50px;
            padding-left: 50px;
            background-color: yellow;
        }
    </style>
    <script>
        s_ = document.createElement('style');
        s_.id = "sr";
        document.head.appendChild(s_);
        addEventListener('click', e => {
            if (e.target.id == 'w125px') {
                s_.innerText = 'p::before{width:125px;padding-left:125px;}';
            }
            if (e.target.id == 'w5px') {
                s_.innerText = 'p::before{width:5px;padding-left:5px;}';
            }
        });

    </script>
</head>
<body>
<p>77777</p>
<p>12354</p>
<p>aaaaa</p>
<button id="w125px">w125px</button>
<button id="w5px">w5px</button>
</body>
</html>



⚤
РБ
Роман Буканов
66 830
Лучший ответ
Суюн Койчуев Когда не читая вопроса воруешь суть кода из предыдущего ответа, хотя бы ошибки в нем исправляй...
Оч просто: никак.
Псевдоклассы не являются элементами, и у них нет DOM-объектов.
Единственный способ влиять на свойства в псевдоклассах - через CSS3 переменные (значения свойств должны их использовать. Если не используют, то облом).
Марина Купрякова
Марина Купрякова
63 928
let ID = {
current: 0,
getNew: function() {
this.current++;
return this.current;
}
};

HTMLElement.prototype.pseudoStyle = function( el, prop, value ) {
let sheetId = "pseudoStyles",
head = document.head || document.getElementsByTagName( "head" )[ 0 ],
sheet = document.getElementById( sheetId ) || document.createElement( "style" ),
className = sheetId + ID.getNew();
sheet.id = sheetId;
this.className += ` ${ className }`;
sheet.innerHTML += `\n.${ className }:${ el }{${ prop }:${ value }}`;
head.appendChild( sheet );
return this;
}

void function() {
document.styleSheets[ 0 ].insertRule(
`p:before {
background: red;
display: block;
padding: 1rem;
content: 'HELLO';
cursor: pointer;
}`, 0
);

setTimeout(() => {
let p = document.getElementsByTagName( "p" )[ 0 ];
p.pseudoStyle( "before", "background", "green" );
p.pseudoStyle( "before", "color", "#fff" );
}, 2000 );
}();

Код: https://jsfiddle.net/1jdokpzy/1/

p.s Для меня новая фишка js - объект styleSheets ( спасибо автору поста ); Кто нибудь знает, как через него менять свойства???
BY
Begen? Yangibayew
3 819
Марина Купрякова Тогда уж вместо той портянки можно просто
document.head.insertAdjacentHTML('beforeend', `<style>
 /* любые CSS-правила */
</style>`);
Элементарно с помощью jquery $('.before').css('width','150px');
Marat Marat
Marat Marat
1 525
Илюха Криушков В css через hover легкр но когда дело доходит до скрлолл ...

Похожие вопросы