Pseudo Element (:before) mit Javascript ändern?

[Timer]

Hey,
ist es möglich von einem Pseudo Element (in meinem Fall :before) mit Javascript zu bearbeiten (z.B. height ändern)?
Mein bisheriger Code:

<header id="header-menu">
    <div id="menu-bar">
        <a href="/">IMG HOME</a>
        <a class="menu-items" href="about">About the Game</a>
        <a class="menu-items" href="news">News</a>
        <a class="menu-items" href="shop">Shop</a>
        <a href="preorder">Pre Order Now</a>
    </div>
</header>

.menu-items:before {
    width: 1px;
    height: 60px;
    background-color: #08658B;
    transform: rotate(45deg);
    content: '';
    position: absolute;
    margin-left: -34px;
    display: block;
    margin-top: -15px;
}

Ich habe zwar mehrere Möglichkeiten im Internet gefunden, jedoch funktionieren die, die in Frage kommen, nicht

 

[basti1012]

Musste erstmal selber testen, wie das geht .
Habe mit After getestet ,aber ist ja fast das Gleiche.

 document.styleSheets[0].insertRule('.menu-items:after { height:100px; }');

Das hat bei mir geklappt. Aber nur wenn du die height: 60px; aus der CSS löscht. Dann geht das über Javascript so.
Aber du brauchst bestimmt beides? CSS 60 px und dann irgendwann im Code dann andere größte? Ich probier mal weiter ,das muss ja auch irgendwie gehen. Oder ich habe beim Testen was falsch gemacht und es geht doch perfekt.

EDIT: Er stell doch eine neue klasse mit den werten die du wechseln wolltest und wechsel dann mit Javascript die Klassen. Das sollte doch auch gehen.
EDIT: Das geht auch
*** Link entfernt, weil nicht mehr erreichbar ***

 

[Aaron3219]

basti es gibt einen einfacheren Weg.
Nennt sich querySelector.

document.querySelector('.menu-items:after').style.background = 'red';

querySelector ist also quasi das $() von JQuery.

 

[Timer]

Danke. Waren alles hilfreiche Kommentare. Der Link von basti war die beste Lösung, da ich mehrere styles verändern wollte (height, padding usw)

 

[Aaron3219]

da ich mehrere styles verändern wollte (height, padding usw)

Nun ja, auch dafür bietet meine Lösung eine Lösung:

document.querySelector('.menu-items:after').style.cssText = 'background: red; padding: 100px; height: 100%';

und so weiter.
Wollte es nur anmerken.

 

[Aaron3219]

Ah verdammt...
ich hatte da glaube ich auch irgendwann was gelesen, doch offensichtlich vergessen.
Dann sorry für die Fehlinfo.