Ma megtanuljuk, hogyan lehet zökkenőmentesen megváltoztatni egy blokk színét CSS és JQuery segítségével. Ezzel a bővítménnyel elképesztően szép tervezési eredményeket érhet el. Például készíthetsz egy menő menüt, amely simán megváltoztatja a színét, ha fölé viszed, és hidd el, nagyon szépnek tűnik.

JQuery

Kezdésként a és a címkék közé a következőket kell tennie:

Ezután ismét a címkék közé másoljuk ezt a szkriptet:

$(document).ready(function())( $(.Box").hover(function() ( $(this).stop().animate(( backgroundColor: "#FF4500", 400); ) , function() ( $(this).stop().animate(( backgroundColor: "#ffffff" ), 400; )); ));

Ahol a .Box az a blokkosztály, amelyet fentebb találtunk ki a CSS-ben.

„#FF4500” – lebegő szín. 400 - animáció sebessége lebegéskor.

A „#ffffff” a kezdőszín a kurzor elmozdítása után. 400 – animációs sebesség a kurzor elmozdításakor.

HTML

Miután mindent megtett a fent leírtak szerint, a blokk színe fokozatosan megváltozik. Egy ilyen blokk beillesztéséhez az oldalra, csak hozzá kell adnia a következőket a megfelelő helyre:

És megjelenik a blokk.

Fontos

Ez a beépülő modul csak a háttér színét tudja megváltoztatni. Például nem lehet linkekhez vagy szöveghez csatolni. A linkek színét egy másik plugin változtatja meg (hamarosan biztosan megírom, hogyan kell).

Ha azt szeretné, hogy az oldalon lévő blokkok különböző színűek legyenek, mint az enyém, akkor több szkriptet kell egymás után elhelyeznie a címkék között, és ennek megfelelően ne felejtse el megváltoztatni a színt a kívánt színre. A legfontosabb dolog az osztály megváltoztatása, például a fenti példánkban - a Box osztály, és a következő szkriptnek egy másik osztálynak kell lennie, például Box1, majd Box2 és így tovább.

Ennyi, kedves barátaim. Ha valamit nem értesz, kérdezz kommentben. Hamarosan találkozunk.

Van egy réteg szöveggel és egy gombbal, ha rákattint, ezen a rétegen meg kell változtatni a szöveg színét.

Szín módosítása (jQuery) $(document).ready(function())( $("#color_change").click(function())( $("#layer").css("color", "#F00" ) )) )); #réteg (szegély:#CCC 1px tömör; vonalmagasság:1,5; kitöltés:10px 20px; szélesség:800px; margó felső:20px;) De hogy megértsd, honnan ered az örömöt elítélő és a fájdalmat dicsérő emberek tévhite , felfedem a teljes képet, és elmagyarázom, mit is mondott pontosan ez az igazságot felfedező ember, akit én a boldog élet építészének neveznék. Valójában senki sem utasítja el, nem veti meg, nem kerüli el az élvezeteket csak azért, mert örömök, hanem csak azért, mert azok, akik nem tudják, hogyan kell ésszerűen hódoljanak az élvezeteknek, nagy szenvedést szenvednek. Ahogyan nincs senki, aki magát a szenvedést csak azért szeretné, részesítené és vágyna rá, mert az szenvedés, és nem azért, mert néha olyan körülmények adódnak, amikor a szenvedés és a fájdalom nem kis örömet okoz. A legegyszerűbb példával élve, ki végezne közülünk bármilyen fájdalmas fizikai gyakorlatot, ha az nem járna vele? És ki tehetne joggal szemrehányást annak, aki az örömöt keresi, ami nem hoz magával bajt, vagy azt, aki elkerülné az ilyen szenvedést, amely nem okoz vele örömet?

A jQuery tulajdonságainak dinamikus megváltoztatásához használja az animációs függvényt. Lehetővé teszi új érték -tulajdonságok és idő beállítását, amely alatt zökkenőmentes animált váltás történik a régi értékről a megadott értékre. Nagyon erős funkció! De szokás szerint légy is van a kenőcsben.

Probléma

Az animált CSS-tulajdonságok készlete korlátozott. Valójában ezek csak azok a tulajdonságok, amelyek számértékeket vehetnek fel. Az animáció különösen nem tud színekkel dolgozni.

Megoldás

Szerencsére van egy bővítmény, amely kiterjeszti az animáció képességeit, és még erősebbé teszi. Kérjük, szeressen és szíveskedjen - jQuery.color! Segítségével hozzáadhatja a , és az érthető animált CSS-tulajdonságok listájához.

A gyakorlatban ez így néz ki: .

Tesztelve:

• IE 6-8
• Firefox 3
• Opera 9.5-10
• Safari 3

Mit kell letölteni?

• jquery.js (55,9 Kb) - jQuery könyvtár 1.3.2-es verzió;
• (3,66 Kb).

Gyors kezdés

A jQuery és a plugin csatlakoztatása:

A CSS-ben kifejezetten beállítjuk a kezdő színt:

Div( háttérszín:#0CF; )

Most az animáció funkciót használjuk, például amikor az egeret mozgatjuk:

jQuery(document).ready(function())( jQuery("div").mouseenter(function () ( jQuery(this).animate(( backgroundColor:"#03C", ), 500; )); jQuery( " div").mouseleave(function() ( jQuery(this).animate(( backgroundColor:"#0CF", ), 500; )); ));

És most részletesebben

A bővítmény lehetővé teszi a következő CSS-tulajdonságokkal való munkát:

Példa: Plusz:

• osztály használata rugalmasabb mechanizmust biztosít, mint az animációs függvény. Elvégre itt nem vagyunk korlátozva az egyidejűleg változó tulajdonságok megválasztásában.

Mínusz:

• Meglehetősen „nehéz” módszer – a könyvtárak elég nagy súlyt nyomnak.

Következtetések:

Ha összetettebb effektusokra van szüksége, mint az animáció, akkor használhatja a switchClass effektust a felhasználói felület készletéből. Ha azonban a feladat a színek simítására korlátozódik, használja a világosabb jQuery.color beépülő modult.

A JQuery.color még jobbá teszi kedvenc animációs funkciómat. Nagyon tetszett, hogy nem ad hozzá semmilyen extra osztályt vagy azonosítót. Egyszerűen kibővíti a sok lehetséges animációs lehetőséget. Használjon mindent a finom színváltozások gyönyörű hatásának megteremtéséhez!

Van mód a CSS pszeudoelemek kiválasztására/manipulálására, mint például ::before és ::after (és régi verzió egy pontosvesszővel) jQuery használatával?

Például a stíluslapom a következő szabályt tartalmazza:

Span::after( content:"foo" )

Hogyan változtathatom meg a „foo”-t „bar”-ra a jQuery használatával?

A pszeudo elem tartalmát átadhatja az adatattribútumnak is, majd a jQuery segítségével manipulálhatja azt:

Foo

$("span").hover(function())( $(this).attr("data-content","bar"); ));

Span:after ( tartalom: attr(data-content) "bármilyen más szöveg, amelyet esetleg szeretne"; )

Ha szeretné megakadályozni, hogy az "egyéb szöveg" megjelenjen, kombinálhatja ezt a Seucolega megoldásával, így:

Foo

$("span").hover(function())( $(this).addClass("módosítás").attr("data-content","bar"); ));

Span.change:after ( tartalom: attr(data-content) " bármilyen más szöveg, amelyet esetleg szeretne"; )

Ez nem praktikus, mivel ezt nem valós használatra írtam, csak azért, hogy példát adjak arra, hogy mit lehet elérni.

Css = ( előtte: function(elem,attr)( if($("#cust_style") !== undefined)( $("body").append(" "); ) else ( $("#cust_style") .remove(); $("body").append(" " + elem + ":before (" + attr + ") "); ) ), after: function(elem,attr)( if($("# cust_style") !== undefined)( $("body").append(" "); ) else ( $("#cust_style").remove(); $("body").append(" " + elem + ":after (" + attr + ") "); ) ) )

ez a kiegészítés jelenleg hozzáad egy elemet vagy hozzáad egy Stílus elemet, amely tartalmazza a szükséges attribútumot, amely hatással lesz a célelemre a Pseudo elem után.

ezt így lehet használni

Css.after("someElement"," content: "Test"; position: "absolute"; ") // stílusok szerkesztése / hozzáadása a:afterhez

Css.before(...); // a megelőző pszeudo elem befolyásolásához.

mint after: and before: pszeudo elemek nem érhetők el közvetlenül a DOM-on keresztül, konkrét css értékeket jelenleg nem lehet szabadon szerkeszteni.

Az én módszerem csak egy példa volt, és nem túl jó gyakorlásra, megváltoztathatod, kipróbálhatod a saját trükkjeidet, és megfelelővé teheted a való világban való használatra.

Tehát végezze el saját kísérleteit ezzel és másokkal!

üdvözli - Adarsh ​​​​Khedde.

Köszönöm mindenkinek! Sikerült megcsinálnom amit akartam :D http://jsfiddle.net/Tfc9j/42/ Nézz ide

Azt akartam, hogy a külső div átlátszatlansága eltérjen a belső div átlátszatlanságától, és ez a változás valahol máshova kattintva ;) Köszönöm!

$("#ena").on("click", function () ( $("head").append("#ena:before ( opacity:0.3; )"); )); $("#duop").on("click", function (e) ( $("head").append("#ena:before ( opacity:0.8; )"); e.stopPropagation(; )) ; #ena( szélesség: 300 képpont; magasság: 300 képpont; szegély: 1 képpont fekete, szilárd ; ) #ena:before (tartalom: attr(data-before); szín: fehér; kurzor: mutató; pozíció: abszolút; háttérszín: piros; átlátszatlanság: 0,9; szélesség: 100%; magasság: 100%; )

duoyyyyyyyyyyyyyy p

Létrehozhat egy hamis tulajdonságot, vagy használhat egy meglévőt, és örökölheti azt az álelem stíluslapon.

var switched = false; // Színváltás engedélyezése setInterval(function () ( var color = switched ? "red" : "darkred"; var element = document.getElementById("arrow"); element.style.backgroundColor = color; // Pszeudoelem kezelése "s css // inheritance használatával. element.style.borderLeftColor = color; switched = !switched; ), 1000); .arrow ( /* KITALÁLT TULAJDONSÁG BEÁLLÍTÁSA */ border-left-color:red; background-color:red; szélesség: 1 em; magasság: 1 em; kijelző: beépített blokk; pozíció: relatív; ) . arrow: after ( szegély-felül: 1 em tömör átlátszó; szegély-jobb: 1 em tömör átlátszó; szegély-alsó: 1 em tömör átlátszó; szegély- bal: 1em tömör átlátszó; /* TULAJDON ÖRÖKSÉGE */ szegély-bal-szín: öröklődik; tartalom:""; szélesség: 0; magasság: 0; pozíció: abszolút; bal: 100%; felül: -50%; )

Úgy tűnik, ez nem működik a tartalomtulajdonnál :(

Nem választhat pszeudo elemeket a jQuery-ben, mert nem részei a DOM-nak. De hozzáadhat egy adott osztályt az apa elemhez, és módosíthatja annak pszeudoelemeit a CSS-ben.

$("span").addClass("módosítás");

Span.change:after ( tartalom: "sáv" )

Bár a böngészők CSS-en keresztül jelenítik meg őket, mintha hasonlóak lennének a többi valódihoz DOM elemek, önmagukban a pszeudo elemek nem részei a DOM-nak, mivel a pszeudo elemek, ahogy a neve is sugallja, nem valós elemek, ezért nem lehet közvetlenül kiválasztani és kezelni őket a jQuery segítségével (vagy Bármi JavaScript API, ha nem is Selectors API). Ez vonatkozik minden olyan pszeudoelemre, amelyet a szkripttel próbál stílusozni, nem csak a ::before és ::after .

A pszeudoelemstílusokat csak közvetlenül futás közben kaphatja meg a CSSOM-on keresztül (think window.getComputedStyle() ), amely a .css() függvényen kívül nincs kitéve a jQuery-nek, amely metódus sem támogatja az álelemeket.

Mindig találhat más megoldást, de például:

egy működik, de nem túl jó hatékony módszer- szabályt hozzáadni egy új tartalmú dokumentumhoz, és hivatkozni egy osztályra. attól függően, hogy mire van szükség, az osztály egyedi azonosítót kérhet a tartalom minden egyes értékéhez.

$("span.id-after:after(content:bar;)").appendTo($("head")); $("span").addClass("id-after");

Már válaszoltam erre a kérdésre, de hogy szuper legyen, megismétlem.

A válasznak az kell lennie Igen & Nem. Álválasztóval nem lehet elemet kijelölni, de javascript segítségével új szabályt adhatunk a stíluslaphoz.

Csináltam valamit, aminek működnie kell:

Var addRule = függvény(lap, kiválasztó, stílusok) ( if (lap.beszúrási szabály) return sheet.insertRule(selector + " (" + styles + ")", sheet.cssRules.length); if (lap.addRule) visszatérési lap .addRule(választó, stílusok); ); addRule(document.styleSheets, "body:after", "content: "foo"");

::előtt

A kiszámított stílus az "előtt" a következő volt: "VERIFY TO WATCH";

Itt van a két jQuery sorom, amelyek azt az ötletet használják, hogy adjunk hozzá egy extra osztályt, amely kifejezetten hivatkozik erre az elemre, majd adjunk hozzá egy stíluscímkét (egy fontos címkével) a módosításhoz. CSS értékek a sudo elem tartalma:

$("span.play:eq(0)").addClass("G");

$("body").append(".G:before(content:"ÚjSzöveg" !fontos)");

Miért adjunk hozzá osztályokat vagy attribútumokat, ha csak stílust adhatunk a fejhez

$("fej").append(".span:after( tartalom:"módosított tartalom" )")

Számos válasz létezik, de egyetlen válasz sem segít a css:before vagy:after manipulálásában, még az elfogadott sem.

Íme, hogyan javaslom megtenni. Tegyük fel, hogy a HTML-je így néz ki:

Teszt

Aztán beállítod: korábban a CSS-ben, és így tervezed:

#something:before( content:"1st"; font-size:20px; color:red; ) #something( content:"1st"; )

Ne feledje, hogy magában az elemben is beállítom a tartalmat, így később könnyen megjeleníthető. Most van egy gombkattintás, aminek a színét szeretné megváltoztatni: zöldre, a betűméretét pedig 30 pixelre. Ezt így érheti el:

Határozza meg a css-t a kívánt stílussal valamilyen class.activeS-ben:

ActiveS:before( szín:zöld !fontos; font-size:30px !fontos; )

Most megváltoztathatja a : stílust úgy, hogy hozzáad egy osztályt a : elemhez, így:

Módosítás $("#changeBefore").click(function())( $("#valami").addClass("activeS"); ));

Ha szeretné megszerezni a tartalmat:előtt, ezt a következőképpen teheti meg:

Tartalom lekérése $("#getContent").click(function())( console.log($("#valami").css("content"));//kinyomtatja az "1st" ));

Végső soron, ha dinamikusan szeretné módosítani a:prefore jQuery tartalmát, akkor ezt a következőképpen érheti el:

Change var newValue = "22";//valahonnan jön var add = "#something:before(content:""+newValue+""!fontos;)"; $("#changeBefore").click(function())( $("body").append(add; ));

A "changeBefore" gombra kattintva a #something:before tartalma "22"-re változik, ami egy dinamikus érték.

Remélem ez segít

A következőképpen érheti el a css-ben definiált :after és :before stílustulajdonságokat:

// A .element:before var color = window.getComputedStyle(document.querySelector(.element"), ":before").getPropertyValue("color") színértékének lekérése; // A .element:before var content = window.getComputedStyle(document.querySelector(.element"), ":before").getPropertyValue("content") tartalomértékének lekérése;

$(".span").attr("data-txt", "foo"); $(".span").click(function () ( $(this).attr("data-txt","bármilyen más szöveg"); )) .span( ) .span:after( content: attr(data) -txt);)

Mi is támaszkodhatunk egyéni CSS-tulajdonságok (változók) manipulálni a pszeudo elemet. Be tudunk olvasni specifikációk, Mit:

Az egyéni tulajdonságok reguláris tulajdonságok, így bármely elemen deklarálhatók, normál öröklődési és lépcsőzetes szabályokkal oldhatók fel, kondicionálhatók @media és egyéb feltételes szabályokkal, használhatók HTML stílusú attribútumban, beolvashatók vagy beállíthatók CSSOM segítségével stb. d.

Ennek alapján az ötlet az, hogy az elemen belül definiáljunk egy egyéni tulajdonságot, és a pszeudoelem egyszerűen örökli azt; így könnyen megváltoztathatjuk:

1) Soron belüli stílus használata:

Box:before (tartalom:"Előttes elem vagyok"; color:var(--color, red); font-size:25px; )

2) CSS és osztályok használata

Box:before ( tartalom:"Előtte elem vagyok"; color:var(--szín, piros); font-size:25px; ) .blue ( --color:blue; ) .black ( --color:black ;)

3) Javascript használata

document.querySelectorAll(.box").style.setProperty("--szín", "kék"); document.querySelectorAll(.box").style.setProperty("--color", "#f0f"); .box:before ( content:"I am a before elem"; color:var(--color, red); font-size:25px; )

4) A jQuery használata

$(.box").eq(0).css("--szín", "kék"); /* az egyéni tulajdonságokkal rendelkező css() függvény csak jQuery vesionnál működik >= 3.x régebbi verziónál, a style attribútum segítségével állíthatjuk be az értéket. Egyszerűen figyeljen, ha már meghatározta a belső stílust! */ $(".box").eq(1).attr("stílus","--szín:#f0f"); .box:before ( content:"I am a before elem"; color:var(--color, red); font-size:25px; )

Komplex értékekkel is használható:

Box ( --c:"tartalom"; --b:lineáris gradiens(piros,kék); --s:20px; --p:0 15px; ) .box:before (tartalom: var(--c) ; háttér:var(--b); szín:#fff; betűméret: calc(2 * var(--s) + 5px); padding:var(--p); )

HA a ::before vagy ::after sudo elemeket CSS-en keresztül akarod teljesen irányítani, akkor ezt JS-ben is megteheted. Lásd alább:

JQuery("head").append(" /* a stílusaid itt */ ");

Vegye figyelembe, hogy az elemnek van egy azonosítója, amellyel eltávolíthatja, és újból hozzáadhatja, ha a stílus dinamikusan változik.

Mellesleg, az elemed pontosan megegyezik azzal, amit akarsz a JS-t használó CSS-sel.

Erre a célra használhatod a bővítményemet.

(function() ( $.pseudoElements = ( hossz: 0 ); var setPseudoElement = function(parameters) ( if (typeof parameters.argument === "object" || (parameters.argument !== undefined && parameters.property ! == undefined)) ( for (var elem of parameters.elements.get()) ( if (!element.pseudoElements) element.pseudoElements = ( styleSheet: null, before: ( index: null, properties: null ), after: ( index: null, tulajdonságok: null ), id: null ); var selector = (function() ( if (element.pseudoElements.id !== null) ( if (Number(element.getAttribute("data-pe-- id")) !== element.pseudoElements.id) element.setAttribute("data-pe--id", element.pseudoElements.id); return "::" + parameters.pseudoElement; ) else ( var id = $ .pseudoElements.length; $.pseudoElements.length++ element.pseudoElements.id = id; element.setAttribute("data-pe--id", id); return "::" + parameters.pseudoElement; ); ))() if (!element.pseudoElements.styleSheet) ( if (document.styleSheets) ( element.pseudoElements.styleSheet = document.styleSheets; ) else ( var styleSheet = document.createElement("stílus"); document.head.appendChild(styleSheet); element.pseudoElements.styleSheet = styleSheet.sheet; ); ); if (element.pseudoElements.properties && element.pseudoElements.index) ( element.pseudoElements.styleSheet.deleteRule(element.pseudoElements.index); ); if (typeof parameters.argument === "objektum") (paraméterek.argumentum = $.extend((), paraméterek.argumentum); if (!element.pseudoElements.properties && !element.pseudoElements.index) ( var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length; element.pseudoElements.index = newIndex; element.pseudoElements;paraméterek.properrgutiesment; var properties = ""; for (var property in parameters.argument) ( if (typeof parameters.argument === "function") element.pseudoElements.properties = parameters.argument(); else element.pseudoElements.properties = paraméterek. argumentum; ); for (var property in element.pseudoElements.properties) ( property += property + ": " + element.pseudoElements.properties + " !important; "; ); element.pseudoElements.styleSheet.addRule(selector, properties , element.pseudoElements.index); ) else if (parameters.argument !== undefined && parameters.property !== undefined) ( if (!element.pseudoElements.properties && !element.pseudoElements.index) ( var newIndex = elem .pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length; element.pseudoElements.index = newIndex; element.pseudoElements.properties = (); ); if (paraméterek típusa.property === "függvény") element.pseudoElements.properties = parameters.property(); else element.pseudoElements.properties = parameters.property; var tulajdonságok = ""; for (var property in element.pseudoElements.properties) ( property += property + ": " + element.pseudoElements.properties + " !important; "; ); element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements.index); ); ); return $(parameters.elements); ) else if (paraméterek.argumentum ! == undefined && parameters.property === undefined) ( var element = $(parameters.elements).get(0); var windowStyle = window.getComputedStyle(element, "::" + parameters.pseudoElement).getPropertyValue(parameters .argument); if (elem.pseudoElements) ( return $(parameters.elements).get(0).pseudoElements.properties || windowsStyle; ) else ( return windowStyle || null; ); ) else ( console.error(" Érvénytelen értékek!"); return false; ); ); $.fn.cssBefore = function(argumentum, property) ( return setPseudoElement(( elemek: this, pseudoElement: "előtte", argumentum: argumentum, property: property )); ); $.fn.cssAfter = function(argumentum, property) ( return setPseudoElement(( elemek: this, pseudoElement: "after", argumentum: argumentum, property: property )); ); ))(); $(function() ( $(.element").cssBefore("content", ""Új korábban!"); )); .element ( szélesség: 480 képpont; margó: 0 automatikus; szegély: 2 képpont folyamatos piros; ) .element::before ( tartalom: "Régi előtt!"; )

Az értékeket úgy kell megadni, mint egy normál jQuery.css függvényben

Ezenkívül megkaphatja a pszeudo elem paraméterének értékét is, ugyanúgy, mint egy normál jQuery.css függvényben:

Console.log($(elem).cssBefore(parameter));

(function() ( document.pseudoElements = ( hossz: 0 ); var setPseudoElement = function(parameters) ( if (typeof parameters.argument === "object" || (parameters.argument !== undefined && parameters.property ! == undefined)) ( if (!parameters.element.pseudoElements) parameters.element.pseudoElements = ( styleSheet: null, before: ( index: null, properties: null ), after: ( index: null, properties: null ), id: null ); var selector = (function() ( if (parameters.element.pseudoElements.id !== null) ( if (Number(parameters.element.getAttribute("data-pe--id")) != = parameters.element.pseudoElements.id) parameters.element.setAttribute("data-pe--id", parameters.element.pseudoElements.id); return "::" + parameters.pseudoElement; ) else ( var id = dokumentum .pseudoElements.length; document.pseudoElements.length++ parameters.element.pseudoElements.id = id; parameters.element.setAttribute("data-pe--id", id); return "::" + parameters.pseudoElement; ); ))(); if (!parameters.element.pseudoElements.styleSheet) ( if (document.styleSheets) (parameters.element.pseudoElements.styleSheet = document.styleSheets; ) else ( var styleSheet = document.createElement("stílus"); document.head.appendChild(styleSheet); parameters.element.pseudoElements.styleSheet = styleSheet.sheet; ); ); if (parameters.element.pseudoElements.properties && parameters.element.pseudoElements.index) (parameters.element.pseudoElements.styleSheet.deleteRule(parameters.element.pseudoElements.index); ); if (typeof parameters.argument === "object") ( parameters.argument = (function() ( var cloneObject = typeof parameters.argument.pop === "function" ? : ();); for (var tulajdonság a paraméterekben. argumentum) ( cloneObject = parameters.argument; ); return cloneObject; ))(); if (!parameters.element.pseudoElements.properties && !parameters.element.pseudoElements.index) ( var newIndex = parameters.element.pseudoElements.styleSheet .rules.length || parameters.element.pseudoElements.styleSheet.cssRules.length || parameters.element.pseudoElements.styleSheet.length; parameters.element.pseudoElements.index = newIndex; parameters.element.pseudoElements. ; ); var properties = ""; for (var property in parameters.argument) ( if (typeof parameters.argument === "function") parameters.element.pseudoElements.properties = parameters.argument(); else parameters.element .pseudoElements.properties = parameters.argument; );for (var property in parameters.element.pseudoElements.properties) ( properties += property + ": " + parameters.element.pseudoElements.properties + " !fontos; "; ); parameters.element.pseudoElements.styleSheet.addRule(selector, properties, parameters.element.pseudoElements.index); ) else if (parameters.argument ! == undefined && parameters.property !== undefined) ( if (!parameters.element.pseudoElements.properties && !parameters.element.pseudoElements.index) ( var newIndex = parameters.element.pseudoElements.styleSheet.rules.length || Paraméterek .property === "function") parameters.element.pseudoElements.properties = parameters.property(); else parameters.element.pseudoElements.properties = parameters.property; var properties = ""; for (var property a parameters.elementben .pseudoElements.properties) ( property += property + ": " + parameters.element.pseudoElements.properties + " !important; "; ); parameters.element.pseudoElements.styleSheet.addRule(szelektor, tulajdonságok, paraméterek.elem.pseudoElements .index); ); ) else if (parameters.argument !== undefined && parameters.property === undefined) ( var windowsStyle = window.getComputedStyle(parameters.element, "::" + parameters.pseudoElement).getPropertyValue(parameters.argument); if (parameters.element.pseudoElements) ( return parameters.element.pseudoElements.properties || windowsStyle; ) else ( return windowStyle || null; ); ) else ( console.error("Érvénytelen értékek!"); return false; ); ); Object.defineProperty(Element.prototype, "styleBefore", ( felsorolható: false, érték: function(argumentum, property) ( return setPseudoElement(( elem: this, pszeudoElement: "előtte", argumentum: argumentum, property: property )); ) )); Object.defineProperty(Element.prototype, "styleAfter", ( felsorolható: false, érték: function(argumentum, property) ( return setPseudoElement(( elem: this, pseudoElement: "after", argumentum: argumentum, property: property )); ) )); ))(); document.querySelector(.element").styleBefore("content", ""Új korábban!""); .element ( szélesség: 480 képpont; margó: 0 automatikus; szegély: 2 képpont folyamatos piros; ) .element::before ( tartalom: "Régi előtt!"; )

Most az én esetemben be kellett állítanom a before elem magasságát a másik magassága alapján, és átméretezéskor változni fog, így ezzel minden ablak átméretezéskor le tudom futtatni a setHeight()-ot, és lecseréli a .

Remélhetőleg ez segít valakinek, aki elakadt, hogy ugyanezt tegye.