jquery abrufen css Stil direkt auf Element gesetzt

Question

Wie kann ich jQuery verwenden, um festzustellen, ob ein Element einen bestimmten Stil inline gesetzt hat.

Zum Beispiel, wenn das Dokument

<style>
.MyClass { position: relative }
</style>
...
<div class="MyClass" id="div1" style="position: absolute"/>
<div class="MyClass" id="div2"/>
...
<script>
function f() {
    assert($('#div1').SOMETHING('position') == 'absolute');
    assert($('#div2').SOMETHING('position') == '');
}
</script>

Wenn ich .css('position') verwende, wird div2 als 'relativ' gemeldet. Wie kann ich feststellen, welche Stile tatsächlich inline gesetzt wurden?

Answer 1

Sie können Ihren eigenen benutzerdefinierten Selektor erstellen:

$(document).ready(function(){
    $.extend($.expr[':'], {
        positionAbsolute: positionAbsolute,
    });
});

function positionAbsolute(el) {
    return $(el).css("position").indexOf("absolute") >= 0;
}

Und dann greifen Sie wie folgt darauf zu

if ($("#MyDiv").is(":positionAbsolute")){
    alert("Position absolute");
}

Muss der Stil inline sein? Wenn Sie ihn in einer CSS-Klasse deklarieren, z. B,

.positionAbsolute{position: absolute}

und dann könnten Sie stattdessen einen Klassenselektor verwenden:

if ($("#MyDiv").is(".positionAbsolute")){
    alert("Position absolute");
}

Answer 2

Am Ende habe ich

assert($('#div2').get(0).style.position == 'relative');

aber ich war für eine mehr jQueryish Weg, es zu tun gehofft.

Answer 3

Was ist mit .attr('style') ?
Und hier ist eine Verbindung zu den jQuery-Dokumenten.

Answer 4

Nun, Sie könnten einfach die .css-Methode verwenden, die alle Stile zurückgibt, die diesem Element zugeordnet sind.