Utilisation des événements de clic jQuery pour capturer les informations de positionnement des éléments-js tutoriel-php.cn

Utilisation des événements de clic jQuery pour capturer les informations de positionnement des éléments

WBOY

Libérer： 2024-02-24 09:15:21

original

1171 Les gens l'ont consulté

Utilisation des événements de clic jQuery pour capturer les informations de positionnement des éléments

Utilisez l'événement de clic jQuery pour obtenir les informations de position de l'élément actuel

Dans le développement Web, il existe souvent des situations où vous devez obtenir les informations de position de l'élément actuel. Par exemple, lorsque vous cliquez sur un élément, vous devez obtenir la position relative de l'élément par rapport au document ou les coordonnées de position de l'élément parent. Cette fonction peut être facilement réalisée à l'aide d'événements de clic jQuery. Voici un exemple de code spécifique pour obtenir les informations de position de l'élément actuel via des événements de clic :

Code 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>

Copier après la connexion

Code 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);
    });
});

Copier après la connexion

Dans ce code, jQuery offset()方法可以获取元素相对于文档的位置信息，其中left表示元素的水平位置，top表示元素的垂直位置。通过点击#box元素时触发的点击事件，获取元素的offset est utilisé, et un une invite apparaît. La boîte affiche les informations de localisation.

De cette façon, les informations de position de l'élément actuel peuvent être facilement obtenues à l'aide des événements de clic jQuery, offrant ainsi plus de possibilités pour le développement Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!