Gibt es eine Möglichkeit zum reset :nach/:bevor Sie die CSS-Regeln für ein element?

Gibt es irgendeine Möglichkeit (robust) reset mögliche :after und :before CSS-Regeln für ein neu erstelltes element?

In der Regel können Sie einfach legen Sie die style-Regeln, die Sie zurücksetzen möchten, auf das element direkt (mit !important wenn Sie sicher sein wollen), aber ich weiß nicht von irgendeiner Weise zu ändern die Regeln definiert, in :after auf das element nur.

(Hat nur die Arbeit mit Chrom, wenn möglich.)

Einer Beispiel bei jsFiddle.

Inhalte Hinzugefügt, mit der :before/:after Regeln ist, die den Wert zurückgegeben, indem clientHeight.

siehe auch stackoverflow.com/questions/5041494/...
gut, es scheint, dass BoltClock antwortete es: stackoverflow.com/a/5041526/107152, Aber vielleicht Chrome hat eine Besondere Art und Weise der Zugriff auf/ändern?
mögliche Duplikate von definieren von CSS-pseudo-Klasse-Regeln in JavaScript
Ich bin nicht ganz zufrieden, mit jeder von den Antworten, obwohl.

InformationsquelleAutor Qtax | 2012-03-21

7

Es ist ein DOM2-API für diese Angelegenheit. Der richtige Weg, dies zu tun ist
```
document.getOverrideStyle(p, ':after').display = 'none'; //or
document.getOverrideStyle(p, ':after').cssText = 'display: none !important;';
```
Leider kein browser implementiert hat. (Webkit gibt null zurück, Firefox hat keine solche Methode). Es sieht aus wie CSS3 nicht einmal die Mühe, Sie reden mehr, vielleicht, weil die usecases sind sehr selten.

So, Sie sind gonna haben zu tun, einige-id/className Magie wie vorgeschlagen oben oder in der anderen thread

Gut zu wissen, es ist (war?) eine durchdachte API für diese, zu schade das es nicht umgesetzt. Gute Quellen +1.

InformationsquelleAutor user123444555621
2

Ich würde nur weisen der name einer Klasse der neuen Elemente, die nicht :before /:after Inhalt.

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

Es würde funktionieren, aber ich würde schauen, dass die Klasse nicht verwendet, anderswo (derzeit oder in der Zukunft), so dass es weniger zuverlässig (theoretisch). Ich hatte gehofft, für etwas, was (in)direkt über das element, - e.g elem.beforeStyle wäre toll. 😉

InformationsquelleAutor Phil
1

Ah, okay. Sie können schreiben, neue CSS, setzt die problematische :before/:after pseudo-Elemente:
```
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;
}
```
Zuweisung einer Zufalls-ID zu dem element, das Sie (wenn es nicht eine haben) können Sie zu hacken-up-inline-styles—eher als der Zugriff auf el.beforeStyle sind, können Sie mithilfe von CSS-Selektoren: el#rkhjr828t9g:before.

Möglicherweise müssen Sie weitere Regeln hinzufügen, um vollständig zurückgesetzt Stile. jsFiddle: um mich zu sehen!

http://www.w3.org/TR/CSS21/generate.html#before-after-content
: Vor und :after pseudo-Elemente interagieren mit anderen Boxen
wenn Sie real waren, Elemente eingesetzt gerade in Ihrem Zusammenhang
element.

Beispielsweise die folgenden Dokument-fragment und style-Sheets:
```
<p> Text </p>                   p:before { display: block; content: 'Some'; }
```
...machen würde, die in genau der gleichen Weise, wie Sie im folgenden Dokument
fragment und style-Sheets:
```
<p><span>Some</span> Text </p>  span { display: block }
```
Entsprechend der folgenden Dokument-fragment und style-Sheets:
```
<h2> Header </h2>     h2:after { display: block; content: 'Thing'; }
```
...machen würde, die in genau der gleichen Weise, wie Sie im folgenden Dokument
fragment und style-Sheets:
```
<h2> Header <span>Thing</span></h2>   h2 { display: block; }
                                      span { display: block; }
```
Nein, Sie scheinen nicht zum erstellen von DOM-Elementen nach stackoverflow.com/a/5041526/107152
wenn Sie nicht fügen Sie alle Elemente, die zugänglich, um den DOM, Verhalten Sie sich wie Kinder spans Hinzugefügt, um das element. Siehe Bearbeitungen.
Das würde auch Auswirkungen auf andere Elemente, für die diese Regeln gelten, die nicht erwünscht ist.
zufällig generierte IDs werden den trick tun :). Geben Sie einfach in das element und die Funktion kümmert sich um den rest. Ich weiß, das ist weit von ideal, aber es ist das beste, was wir haben.

InformationsquelleAutor benesch

Verwenden ruleSelector("ref::before")[0].style statt 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>

InformationsquelleAutor 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>

InformationsquelleAutor Mandy

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.