jQuery erhalten Attribut aus der Mode

Question

ich etwas aus dem Attribut „style“ extrahieren müssen: die „oben“ und „links“ Attribut

<div style="top: 250px; left: 250px;" id="1" class="window ui-draggable"> 

Was ist der beste Weg, dies mit jQuery zu tun? Gibt es einen einfachen Weg, oder muss ich auf String-Funktionen zurückgreifen?

Answer 1

Es hängt davon ab, was Sie brauchen. Wenn Sie den berechneten Wert benötigen - z.B. der tatsächliche Wert der Browser nach dem Parsen alle Stylesheets verwendet -

$("#element_1").css("top") 
$("#element_1").css("left") 

verwenden Wenn ein Pixelwert ist, dass immer geht das eine in der style Eigenschaft angegeben werden - es sei denn, die von einem !important außer Kraft gesetzt wurde Anweisung in einem Stylesheet.

jQuery docs for .css()

Wenn Sie explizit den Wert in dem style Eigenschaft des Elements angegeben benötigen, verwenden

$("#element_1")[0].style.top 
$("#element_1")[0].style.left 

im Gegensatz zu .css(), werden diese Werte leer sein, wenn sie nicht in der style Eigenschaft angegeben wurden.

(mit ID element_1, können Sie nicht eine ID 1 genannt haben)

Answer 2

https://developer.mozilla.org/en/DOM/window.getComputedStyle

Answer 3

CSS-Eigenschaften sind durch Standard-DOM-Eigenschaften zugänglich:

alert($("#theElement")[0].style.top) // "250px" 
alert($("#theElement")[0].style.left) // "250px" 

Als beiseite lässt, ist "1" kein gültiges HTML-Element ICH WÜRDE.

Answer 4

können Sie verwenden, um die CSS Funktion:

var topValue = $(this).css("top"); //Change the selector to meet your needs 
var leftValue = $(this).css("left"); //Change the selector to meet your needs 

Answer 5

.css- mit() eine ganze Zahl + px zurück, aber man kann leicht eine schöne saubere ganze Zahl erhalten, indem Sie diese:

var yourVar = parseInt($('selector').css('top'), 10);