Risoluzione del problema di impossibilità di ottenere il valore con div.style.left in JavaScript

Primo, sommario del problema:

　　　 Lo stile deve essere scritto direttamente all'interno dell'elemento per poter ottenere direttamente l'attributo tramite div.style.left (ovvero deve essere uno stile inline), lo stile definito nel css non può essere ottenuto in questo modo.

　　 Fermare la movimentazione dell'elemento a 200

setTimeout(function () {  
  var div = document.getElementById("div4");
  //var left = parseInt(div.style.left) + 5;
  var left = div.offsetLeft + 5;
  div.style.left = left + "px";
  if (left < 200) {
    setTimeout(arguments.callee, 50);
  }
}, 50);

Secondo, riguardo alla differenza tra offsetLeft e left(Riguardo a offsetLeft:https://developer.mozilla.org/it/docs/Web/API/HTMLElement/offsetLeft)

　　 1. Solo gli elementi con l'attributo position: relative o absolute hanno l'attributo left, tutti gli elementi hanno l'attributo offsetLeft.

　　 2. L'elemento deve avere lo stile inline impostato su left per poter ottenere l'attributo tramite div.style.left; offsetLeft può essere direttamente ottenuto tramite div.offsetLeft.

　　 3.left è both readable and writable, restituisce una stringa; offsetLeft è sola lettura, restituisce un numero.

　 Punti in comune: il metodo di posizionamento è lo stesso, se il padre dell'elemento ha impostato un elemento di posizionamento (position impostato su relative o absolute), allora è posizionato rispetto all'elemento di posizionamento, altrimenti è posizionato rispetto all'elemento radice.

3. Esempio:

　　　 HTMLElement.offsetParent è una proprietà sola lettura, che restituisce un riferimento all'elemento di posizionamento più vicino (closest, che si riferisce al livello gerarchico più vicino) che contiene l'elemento. Se non ci sono elementi di posizionamento, l'offsetParent è l'elemento table più vicino o l'elemento radice (nel modello standard è html; nel modello quirks è body). Quando lo style.display dell'elemento è impostato su "none", l'offsetParent restituisce null. L'offsetParent è molto utile perché offsetTop e offsetLeft sono relativi al margine interno del bordo.

　　　 Il padre del span sottostante non ha impostato un elemento di posizionamento, quindi l'offsetParent di questo elemento è l'elemento radice, in questo caso l'offsetTop è posizionato rispetto all'elemento radice.

<div style="width: 300px; border-color:blue;
 border-style:solid; border-width:1;">
 <span>Short span. </span>
 <span id="long">Long span che avvolge all'interno di questo div.</span>
 </div>
<div id="box" style="position: absolute; border-color: red;
 border-width: 1; border-style: solid; z-index: 10">
</div>
<script>
 var box = document.getElementById("box");
 var long = document.getElementById("long");
 //
 // long.offsetLeft è il valore di offsetLeft dello span.
 // span è un elemento inline, non ha posizionamento assoluto, ma di default offsetParent è il padre dell'elemento, non l'elemento radice
 //
 box.style.left = long.offsetLeft + document.body.scrollLeft + "px";
 box.style.top = long.offsetTop + document.body.scrollTop + "px";
 box.style.width = long.offsetWidth + "px";
 box.style.height = long.offsetHeight + "px";
</script>

Se si aggiunge una proprietà di posizionamento al padre di long, il risultato sarà come segue:

　Quarto capitolo: Sommario:

　　 Estrarre il valore di offset di un elemento tramite il metodo offsetLeft (offsetTop) in JavaScript è molto conveniente, e il valore ottenuto è numerico; per modificare il valore di offset dell'elemento, utilizzare style.left (top, right, bottom), il valore ottenuto tramite style.left è una stringa, se si desidera modificare la posizione dell'elemento tramite style.left, è necessario prima convertire il valore di left attuale ottenuto in un numero tramite parseInt.

Le soluzioni descritte sopra sono quelle che l'editor ha introdotto per risolvere i problemi di JavaScript non risolvibili tramite div.style.left, sperando che possano essere utili a tutti. Se avete qualsiasi domanda, siete i benvenuti a lasciare un commento.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il diritto d'autore è dell'autore originale, il contenuto è stato contribuito autonomamente dagli utenti di Internet e caricato autonomamente, il sito web non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, il sito web eliminerà immediatamente il contenuto sospetto di violazione del copyright.