JavaScriptコードを使用してleftとtopの値を取得する方法を詳しく解説

次のエディターは、ネイティブ JS で左の値と上の値を取得する 3 つの方法を提供します。編集者はこれがとても良いと思ったので、参考として共有します。エディターをフォローして見てみましょう

js を使用して動的なエフェクトを作成する場合、通常、要素の絶対位置で left と top の属性値を取得する必要があります。たとえば、コリジョンアドバタイズメントを作成するには、要素のtopとleftの属性値を常に取得する必要があります。

注意事項: 値を受け取る要素は、left 値を取得するために、position:absolute 絶対位置属性を設定する必要があります。

最初のメソッドは、obj.style.left と obj.style.top を直接使用するという比較的単純な方法ですが、この取得方法には left スタイルと inline スタイルしか取得できません。 topの属性値は、styleタグやリンク外部参照のleftとtopの属性値からは取得できません。

2 番目のメソッドは読み取り専用です。 はすべてのスタイルを取得できます。標準ブラウザでは、window.getComputedStyle(object, null).left を通じて要素の左と上を取得できます。メソッドの属性値。 IE ブラウザでは、obj.currentStyle.left メソッドを使用して属性値を取得します。

3 番目のメソッド、 obj.offsetLeft を使用してオブジェクトの左側の属性値を取得し、obj.offsetTop を使用してオブジェクトの上部の属性値を取得します。

以上がJavaScriptコードを使用してleftとtopの値を取得する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。