Y at-il un moyen de réinitialiser: après /: avant les règles CSS pour un élément?

Existe-t-il un moyen de réinitialiser (de manière robuste) toutes les règles CSS :after et :before possibles pour un élément nouvellement créé?Y at-il un moyen de réinitialiser: après /: avant les règles CSS pour un élément?

Normalement, vous pouvez simplement définir les règles de style que vous souhaitez réinitialiser sur l'élément directement (avec !important si vous voulez être sûr), mais je ne connais aucun moyen de modification des règles définies dans :after sur l'élément seulement .

(il suffit de travailler avec Chrome, si possible.)

Un exemple à jsFiddle. Le contenu ajouté avec les règles :before/:after affecte la valeur renvoyée par clientHeight.

Source

2012-03-21 Qtax

voir aussi http://stackoverflow.com/questions/5041494/manipulating-css-before-and-after-pseudo-elements-using-jquery – benesch

@primatology, bien , semble que BoltClock y a répondu: http://stackoverflow.com/a/5041526/107152 Mais peut-être que Chrome a une façon particulière d'y accéder/de les modifier? – Qtax

duplication possible de [Définition des règles CSS pseudo-classe de JavaScript] (http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript) – user123444555621

Il y a un DOM2 API pour cette question.La manière correcte de le faire est

document.getOverrideStyle(p, ':after').display = 'none'; // or 
document.getOverrideStyle(p, ':after').cssText = 'display: none !important;';

Malheureusement, aucun navigateur ne l'a implémenté. (Webkit returns null, Firefox has no such method). On dirait que CSS3 ne prend même plus la peine de parler de ça, peut-être parce que les usecases sont très rares.

Vous allez devoir faire un peu de magie id/className comme suggéré above ou dans le other thread

Source

2012-03-21 05:08:24 user123444555621

Bon à savoir il y a (était?) Une API pensée pour ça, dommage qu'elle ne soit pas implémentée. Bonnes sources, +1. – Qtax

J'attribuerais simplement un nom de classe aux nouveaux éléments qui n'ont pas le contenu :before/:after.

Exemple - http://jsfiddle.net/84kZK/1/

Source

2012-03-21 03:36:53 Phil

Cela fonctionnerait, mais je devrais vérifier que la classe n'est utilisée nulle part ailleurs (actuellement ou dans le futur), la rendant moins fiable (théoriquement). J'espérais quelque chose (in) directement accessible via l'élément, par exemple 'elem.beforeStyle' serait génial. ;-) – Qtax

Ah, d'accord. Vous pouvez écrire un nouveau CSS qui remet à zéro les pseudo-éléments offensant :before/:after:

function resetPsuedo(el) { 
    if (!el.id) el.id = makeId(); 
    var selector = "#" + el.id; 

    var head = document.getElementsByTagName('head')[0], 
    style = document.createElement('style'), 
    rules = document.createTextNode(selector + ":before, " + selector + ":after { content: '' }"); 

    style.type = 'text/css'; 
    if(style.styleSheet) 
     style.styleSheet.cssText = rules.nodeValue; 
    else style.appendChild(rules); 
    head.appendChild(style); 
} 

function makeId() { 
    var text = ""; 
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; 

    for (var i=0; i < 15; i++) 
     text += possible.charAt(Math.floor(Math.random() * possible.length)); 

    return text; 
}

assignant un élément aléatoire à l'élément que vous passer (si elle n'a pas un) vous permet de pirater-up en ligne styles - plutôt que d'accéder à el.beforeStyle, vous pouvez utiliser des sélecteurs CSS: el#rkhjr828t9g:before.

Vous devrez peut-être ajouter plus de règles pour réinitialiser complètement les styles. jsFiddle:view me!

http://www.w3.org/TR/CSS21/generate.html#before-after-content

: before et: après des éléments pseudo-interagissent avec d'autres boîtes comme si elles étaient des éléments réels insérés juste à l'intérieur de leur élément associé.

Par exemple, le fragment de document suivant et la feuille de style:
<p> Text </p>     p:before { display: block; content: 'Some'; } 
... viderait exactement de la même manière que le document suivant feuille de fragment et de style:
<p><span>Some</span> Text </p> span { display: block } 
De même , le fragment de document suivant et la feuille de style:
<h2> Header </h2>  h2:after { display: block; content: 'Thing'; } 
... viderait exactement de la même manière que le document suivant feuille de fragment et de style:
<h2> Header <span>Thing</span></h2> h2 { display: block; } 
             span { display: block; } 

Source

2012-03-21 03:36:54 benesch

Non, ils ne semblent pas créer d'éléments DOM selon http://stackoverflow.com/a/5041526/107152 – Qtax

@Qtax, bien qu'ils n'ajoutent aucun élément * accessible * au DOM, ils se comporter comme des «travées» d'enfants ajoutées à l'élément. Voir les modifications. – benesch

Cela affecterait également d'autres éléments pour lesquels ces règles s'appliquent, ce qui n'est pas souhaité. – Qtax

Utilisation ruleSelector("ref::before")[0].style au lieu de document.getOverrideStyle(ref, ':before').

http://jsfiddle.net/s3fv8e5v/4/

<!DOCTYPE html> 
<title>CSS</title> 

<style> 
    body { 
     font: 200%/1.45 charter; 
    } 
    ref::before { 
     content: '\00A7'; 
     letter-spacing: .1em; 
    } 
</style> 

<article>The seller can, under Business Law <ref>1782</ref>, offer a full refund to buyers. </article> 

<script> 
    function ruleSelector(selector) { 
     function uni(selector) { 
      return selector.replace(/::/g, ':') // for Firefox 
     } 
     return Array.prototype.filter.call(Array.prototype.concat.apply([], Array.prototype.map.call(document.styleSheets, function(x) { 
      return Array.prototype.slice.call(x.cssRules); 
     })), function(x) { 
      return uni(x.selectorText) === uni(selector); 
     }); 
    } 

    var toggle = false, 
     pseudo = ruleSelector("ref::before").slice(-1); 

    document.querySelector("article").onclick = function() { 
     pseudo.forEach(function(rule) { 
      if (toggle = !toggle) 
       rule.style.color = "red"; 
      else 
       rule.style.color = "black"; 
     }); 
    } 
</script>

Source

2014-12-30 15:08:12 bumfo

-1

//reference to this link:https://pankajparashar.com/posts/modify-pseudo-elements-css/ I wrote a demo and just modified the top attribute of ::before,here is the demo. 
<head> 
    <meta charset="UTF-8"> 
    <title>测试是否可以js修改伪类元素css yessssss</title> 
    <style type="text/css"> 
    .htmlbox_close::before, 
    .htmlbox_close::after { 
     content: ''; 
     position: absolute; 
     height: 2px; 
     top: 4%; 
     width: 3%; 
     left: 2%; 
     margin-top: -1px; 
     background: #51aed9; 
     height: 1.1%; 
    } 

    .htmlbox_close::before { 
     -webkit-transform: rotate(45deg); 
     -moz-transform: rotate(45deg); 
     -ms-transform: rotate(45deg); 
     -o-transform: rotate(45deg); 
     transform: rotate(45deg); 
    } 

    .htmlbox_close::after { 
     -webkit-transform: rotate(-45deg); 
     -moz-transform: rotate(-45deg); 
     -ms-transform: rotate(-45deg); 
     -o-transform: rotate(-45deg); 
     transform: rotate(-45deg); 
    } 
    </style> 
</head> 

<body> 
    <div class="htmlbox_close"></div> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
    var str = window.getComputedStyle($('.htmlbox_close')[0], '::before').getPropertyValue('top'); 

    console.log(str); 
    document.styleSheets[0].addRule('.htmlbox_close::before', 'top:100px'); 
    document.styleSheets[0].insertRule('.htmlbox_close::before { top:100px }', 0); 
    document.styleSheets[0].addRule('.htmlbox_close::after', 'top:100px'); 
    document.styleSheets[0].insertRule('.htmlbox_close::before { top:100px }', 0); 

    var str = window.getComputedStyle($('.htmlbox_close')[0], '::before').getPropertyValue('top'); 

    console.log(str); 
    </script> 
</body>

Source

2016-10-11 07:43:22 Mandy

Y at-il un moyen de réinitialiser: après /: avant les règles CSS pour un élément?

Répondre

Questions connexes