modificare pseudo selezionare: dopo in javascript

Question

Ho definito un css come

.slidingTag li:after { 
    content: ''; 
    z-index: 3; 
    height: 6px; 
} 

voglio cambiare l'altezza attribuire dinamicamente da JS. Posso ottenere la proprietà usando

window.getComputedStyle(document.querySelector('.slidingTag'), 'li:after').getPropertyValue('height') 

Ma non so come cambiare l'attributo altezza. Ho provato a usare setProperty ma sembra che non ci sia alcuna funzione disponibile per le pseudo-classi. Qualsiasi idea me lo faccia sapere.

Answer 1

Se lo stile proviene da un file CSS, sarà necessario cercarlo in document.styleSheets, che sarà disordinato.

Se si è aperti alla creazione dinamica di un elemento <style> che contiene invece il CSS, è possibile modificarlo a livello di programmazione.

var slidingTagLiAfterStyle = document.createElement("style"); 
slidingTagLiAfterStyle.innerHTML = 
".slidingTag li:after { 
    content: ''; 
    z-index: 3; 
    height: 6px; 
    }"; 
document.head.appendChild(slidingTagLiAfterStyle); 

... 

slidingTagLiAfterStyle.innerHTML = slidingTagLiAfterStyle.innerHTML.replace(/height: [0-9]+px/, "height: 12px"); // or whatever you want to set it to 

Answer 2

Gli pseudo-elementi come: before e: after sono gestite da CSS, non il DOM. Per questo motivo, è necessario adottare un approccio diverso.

Che cosa è può fare è trovare la regola CSS responsabile per questo pseudo-elemento e modificarlo. Lo fai usando CSSOM, che è un'API piuttosto diversa, anche se per prima cosa accedi al DOM.

A differenza del DOM, le regole CSS non hanno identificativi o nomi di classe che possono essere cercati in modo pulito e veloce, quindi dobbiamo cercare nell'elenco di fogli di stile e regole di stile. Questo può essere costoso, quindi se è possibile cercarlo solo una volta, consiglio vivamente di farlo. Ecco un modo rapido e-sporco per farlo:

function getRuleWithSelector(selector) { 
 
    var numSheets = document.styleSheets.length, 
 
    numRules, 
 
    sheetIndex, 
 
    ruleIndex; 
 
    // Search through the style sheets. 
 
    for (sheetIndex = 0; sheetIndex < numSheets; sheetIndex += 1) { 
 
    numRules = document.styleSheets[sheetIndex].cssRules.length; 
 
    for (ruleIndex = 0; ruleIndex < numRules; ruleIndex += 1) { 
 
     if (document.styleSheets[sheetIndex].cssRules[ruleIndex].selectorText === selector) { 
 
     return document.styleSheets[sheetIndex].cssRules[ruleIndex]; 
 
     } 
 
    } 
 
    } 
 
    // If we get this far, then the rule doesn't exist. 
 
    // So the return value is undefined. 
 
} 
 

 
var afterSlidingTagRule = getRuleWithSelector('.slidingTag li::after'); 
 
console.debug(afterSlidingTagRule); 
 
window.addEventListener('DOMContentLoaded', function() { 
 
    afterSlidingTagRule.style.fontSize = "10px"; 
 
}, false);

.slidingTag { 
 
    color: blue; 
 
} 
 
.slidingTag li { 
 
    color: green; 
 
} 
 
.slidingTag li:after { 
 
    content: "World"; 
 
    font-size: 32px; 
 
}

<ul class="slidingTag"> 
 
    <li class="selected">Hello</li> 
 
    <li>World</li> 
 
</ul>

Una volta che hai la regola è necessario, il resto è molto simile a lavorare con getComputedStyle(), oppure con attributo style di un elemento DOM. Lo snippet precedente lo fa in un gestore di eventi DOMContentLoaded, ma dovresti essere in grado di farlo in qualsiasi momento una volta caricati.

Ci sono alcune avvertenze da prendere in considerazione con questo approccio:

• Quando si modifica una regola CSS, che il cambiamento si riflette in ogni elemento che la regola seleziona. Se hai una regola che influisce su molti elementi e devi cambiare il modo in cui appaiono tutti questi elementi, questo è ottimo. Se hai una regola che influenza molti elementi, ma hai solo bisogno di cambiare l'aspetto di uno di questi elementi, non è così buono.
• La visualizzazione CSSOM del testo del selettore potrebbe non corrispondere a ciò che è stato scritto. Questo viene in questo esempio, infatti, perché il tuo selettore dovrebbe leggere .slidingTag li::after (notare i due punti in più). Il browser corregge questo quando analizza il tuo CSS, e questo è ciò che CSSOM sa cercare.
• Solo perché una regola dice qualcosa non significa che l'elemento verrà visualizzato in questo modo.Tutto ciò che può ignorare una regola CSS - stili specifici per l'elemento, regole più specifiche in altre parti del set, dichiarazioni !important e così via- può anche ignorare le modifiche.
• Questo non è un sostituto per getComputedStyle(). Ciò segue da quanto sopra: se qualcosa cambia la presentazione di un elemento, ciò non influisce sulle regole CSS sottostanti. Semmai, è il contrario di getComputedStyle(): invece di ottenere quello che un elemento attualmente schermi, IT set cosa certa elementi dovrebbe display (salvo imprevisti).

Answer 3

È possibile aggiungere una classe in più per voi elemento che dispone di una proprietà diversa sul :after, come:

prima devi questo:

HTML:

<div class="slidingTag"> 
    <li>lorem ipsum</li> 
</div> 

CSS:

.slidingTag li:after { 
     content: ''; 
     z-index: 3; 
     height: 6px; 
    } 

allora ottenuto questo:

nuova classe che sostituirà la proprietà height:

.slidingTag-modifier li:after { 
    content: ''; 
    z-index: 3; 
    height: 10px !important; 
} 

finale HTML:

<div class="slidingTag slidingTag-modifier"> 
    <li>lorem ipsum</li> 
</div> 

di farlo con javascript:

var element = document.querySelector('.slidingTag'); 
//use this instruction wherever you want to add the new class that will override the property 
element.classList.add('slidingTag-modifier'); 
//works only on recent browsers 

applausi!