Comment obtenir la valeur de propriété gauche CSS d'un div en utilisant JavaScript

Ma règle CSS ressemble à ceci:

#my-div{
    display: none;
    position: absolute;
    left: -160px;
    bottom: -150px;
}

Je suis en train d'essayer d'obtenir la valeur de la gauche de la propriété comme cela:

  • document.getElementById('my-div').style.left
  • document.getElementById('my-div').offsetLeft

Le problème est que les deux de retour null. Où est le problème?

source d'informationauteur Kin

  1. 22

    Le problème est que someElement.style.left ne fonctionne que si vous avez de style en ligne. Puisque vous appliquez votre style grâce à une feuille de style, vous ne serez pas en mesure d'aller chercher la valeur la façon dont vous vous attendez.

    Vous avez un couple de d'autres approches que vous pouvez prendre pour obtenir la valeur à l'aide de JavaScript:

    fenêtre.getComputedStyle:

    Il est possible d'obtenir le calcul de style d'un élément à l'aide de window.getComputedStylele problème est qu'il a tout à fait le soutien limité (IE9+). Si vous voulez continuer à l'utiliser, vous pourriez l'envelopper dans une fonction pour la rendre un peu plus facile à obtenir à chaque propriété: 

    function getCssProperty(elmId, property){
   var elem = document.getElementById(elmId);
   return window.getComputedStyle(elem,null).getPropertyValue(property);
}
//You could now get your value like
var left = getCssProperty("my-div", "left");

    Exemple de travail

    jQuery (ou une autre bibliothèque):

    Une autre option serait d'utiliser une bibliothèque JavaScript comme jQuery (ou ce que vous préférez), qui vous fournira une solution de navigateur pour obtenir la valeur.

    Avec jQuery, vous pouvez utiliser les .css() méthode pour lire le CSS-propriété de l'élément.

    $(function () {
  var left = $("#my-div").css("left");
});

    Exemple de travail

  2. 2

    Vous devez appeler cette

    document.getElementById('my-div').style.left
document.getElementById('my-div').offsetLeft

    lorsque le document est chargé, si vous l'appelez plus tôt, il sera de retour nulle, car l'élément n'existe pas encore. De sorte que vous pouvez utiliser jQuery pour déterminer quand le contenu est chargé.

    $(function() {
    //put your code here
});
  3. 1

    Le problème est que, depuis CSS est chargée séparément de la JS, il n'y a pas de manière officielle pour s'assurer que le style.left de la propriété exacte. Le style.left de la propriété est une autre priorité plus élevée de style personnalisée.

    Vous aurez besoin d'utiliser la getComputedStyle fonction.

    https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle

    Ex:

    var div = document.getElementById('my-div');
var style = getComputedStyle(div);
var left = style.getPropertyValue("left");
  4. 0

    Peut-être que vous appelez de vos fonctions après le document prêt.

    Si vous utilisez jQuery, vous pouvez trouver à gauche de la valeur plus rapidement:

     $(document).ready(function() {
     var $left = $('#my-div').css('left');
     console.log($left);
 });