English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験の記録
  4. 本文

JavaScriptでdiv.style.leftから値を取得できない解決方法

一、問題の要約：

　　　 スタイルは要素内部に直接書かないとdiv.style.leftを通じて属性値を取得することはできません（内联スタイルである必要があります）。CSSに定義されたスタイルはこの方法で取得できません。

　　 要素を移動させる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);

二、关于offsetLeftとleftの違い（关于offsetLeft：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetLeft）

　　 1position：relativeまたはabsolute属性が定義された要素のみがleft属性を持つことができますが、すべての要素にはoffsetLeft属性があります。

　　 2.leftをインラインスタイルで設定した要素のみ、div.style.leftを通じて取得できます；offsetLeftは直接div.offsetLeftを通じて取得されます。

　　 3.leftは読み取り書き込み可能で、取得されるのは文字列です；offsetLeftは読み取り専用で、取得されるのは数字です。

　 同じ点：定位方法が同じで、親要素に定位要素（positionがrelativeまたはabsoluteに設定されている）が設定されている場合、定位要素に対して定位されます。そうでない場合、ルート要素に対して定位されます。

三、例：

　　　 HTMLElement.offsetParentは読み取り専用の属性であり、最も近い（closest、包含レベルの最も近い）定位要素を指します。定位要素がない場合、offsetParentは最も近いtable要素オブジェクトまたはルート要素（標準モードではhtml；quirksモードではbody）です。要素のstyle.displayが"none"に設定されている場合、offsetParentはnullを返します。offsetParentは非常に有用であり、offsetTopとoffsetLeftはすべてその内側マージン境界に対して相対的に指定されます。

　　　 以下のspanの親要素に位置設定がなく、そのためのoffsetParentはルート要素です。この場合、offsetTopはルート要素に対して定位されます。

<div style="width: 300px; border-color:blue;
 border-style:solid; border-width:1>
 <span>Short span. </span>
 <span id="long">Long span that wraps withing this 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のこの値はspanのoffsetLeftです。
 // spanはインライン要素であり、absolute定位を持っていませんが、デフォルトではoffsetParentは親要素であり、ルートではありません。
 //
 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>

longの親要素に位置属性を追加すると、以下の結果になります：

　第4節：まとめ：

　　 javascriptでは、offsetLeft（offsetTop）メソッドを使用して要素のオフセット値を取得することが簡単です。取得されるのは数値です；要素のオフセット値を変更するにはstyle.left（top、right、bottom）を使用します。style.leftを使用して取得されるのは文字列の値です。style.leftを使用して要素の位置を変更する場合は、取得した現在のleft値をparseIntを使用して数値に変換する必要があります。

以上は、編集者が皆さんに紹介したJavaScriptでdiv.style.leftを使用して値を取得できない場合の解決策です。皆さんに役立つことを願っています。何かご不明な点があれば、コメントをお願いします。

声明：本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、アップロードしたものであり、本サイトは所有権を持ちません。また、人工的な編集は行われておらず、関連する法的責任も負いません。著作権侵害が疑われる内容が見つかった場合は、以下のメールアドレスまでご連絡ください：notice#oldtoolbag.com（メールを送信する際には、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認がとりあえず、本サイトは侵害される可能性のあるコンテンツをすぐに削除します。）

基本教程
おすすめ