jQuery s'attribut du style

Question

je dois extraire quelque chose de l'attribut « style »: le « top » et « gauche » attribut

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

Quelle est la meilleure façon de le faire avec jQuery? Y at-il un moyen facile, ou devrais-je recourir à des fonctions de chaîne?

Answer 1

Cela dépend de ce dont vous avez besoin. Si vous avez besoin de la valeur calculée - par ex. la valeur réelle du navigateur utilisé après avoir analysé toutes les feuilles de style - utiliser

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

Si c'est une valeur de pixel, qui va toujours être celui spécifié dans la propriété style-à moins qui a été remplacé par un !important déclaration dans une feuille de style.

jQuery docs for .css()

Si vous explicitement besoin de la valeur spécifiée dans style propriété de l'élément, utilisez

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

contrairement .css(), ces valeurs seront vides si elles ne sont pas précisés dans la propriété style.

(avec ID element_1, vous ne pouvez pas avoir une carte d'identité du nom 1)

Answer 2

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

Answer 3

propriétés CSS sont accessibles par des propriétés DOM standard:

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

En aparté, "1" n'est pas un élément HTML valide ID.

Answer 4

Vous pouvez utiliser la fonction CSS:

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

en utilisant Css() retourne un entier + px, mais vous pouvez facilement obtenir un joli entier propre en faisant ceci:

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