jQuery クリックイベントを使用して要素の位置情報を取得する-jsチュートリアル-php.cn

jQuery クリックイベントを使用して要素の位置情報を取得する

WBOY

リリース： 2024-02-24 09:15:21

オリジナル

1198 人が閲覧しました

jQuery クリックイベントを使用して要素の位置情報を取得する

jQuery のクリックイベントを使用して現在の要素の位置情報を取得する

Web 開発では、要素の位置情報を取得する必要がある場面がよくあります。現在の要素 (特定の要素をクリックしたときなど) 要素がある場合、ドキュメントまたは親要素を基準とした要素の位置座標を取得する必要があります。この機能は、jQuery のクリックイベントを使用して簡単に実現できます。以下は、クリックイベントを通じて現在の要素の位置情報を取得する具体的なコード例です。

HTML コード:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取元素位置信息</title>
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
    <script src="script.js"></script>
</body>
</html>

ログイン後にコピー

JavaScript コード (script.js):

$(document).ready(function() {
    $("#box").click(function(e) {
        var offset = $(this).offset();
        var x = offset.left;
        var y = offset.top;
        
        var message = "元素相对于文档的位置：X坐标：" + x + "，Y坐标：" + y;
        alert(message);
    });
});

ログイン後にコピー

In このコードでは、ドキュメントに対する要素の位置情報は、jQuery の offset() メソッドを通じて取得できます。ここで、left は要素の水平位置を表し、 top は要素の垂直位置を表します。 #box 要素がクリックされたときにトリガーされる click イベントを通じて、要素の offset が取得され、位置情報を表示するプロンプトボックスがポップアップ表示されます。

このように、jQuery のクリックイベントを使用して現在の要素の位置情報を簡単に取得できるため、Web 開発の可能性が広がります。

以上がjQuery クリックイベントを使用して要素の位置情報を取得するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。