JQuery、Js獲取元素、滑鼠位置

阿新 • • 發佈：2019-02-08

單機某個元素彈出視窗有時需要動態的獲取元素的位置
例如：
這裡寫圖片描述
例如圖片中的彈框，如果紅色單詞向右移動，彈窗會顯示不完整
JQuery 獲得絕對,相對位置的座標方法

//獲取頁面某一元素的絕對X,Y座標
var X = $('#ID').offset().top;
var Y = $('#ID').offset().left;
//獲取相對(父元素)位置:
var X = $('#ID').position().top;
var Y = $('#ID').position().left;

還可以在發生事件時通過screenX、clientX、pageX獲取元素位置
screenX:滑鼠位置相對於使用者螢幕水平偏移量，而screenY也就是垂直方向的，此時的參照點也就是原點是螢幕的左上角。

clientX:跟screenX相比就是將參照點改成了瀏覽器內容區域的左上角，該參照點會隨之滾動條的移動而移動。

pageX：參照點也是瀏覽器內容區域的左上角，但它不會隨著滾動條而變動

如圖(紅點就是滑鼠當前位置)
這裡寫圖片描述

參考程式碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title 
></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .div {
            text-align: center;
            font-size: 24px;
            height 
: 300px;
            width: 1300px;
            line-height: 300px;
            color: yellow;
        }

        #d1 {
            background-color: red;
        }

        #d2 {
            background-color: green;

        }

        #d3 {
            background-color: blue;
        }

        #d4 {
            position: absolute;
            background-color: yellow;
            height: 150px;
            width: 120px;
            top: 0;
        }
    </style>
    <script type="text/javascript">

        $(function () {

            window.onscroll = function () {
                $("#d4").css("top", getScrollTop());
            };

            document.onmousemove = function (e) {
                if (e == null) {
                    e = window.event;
                }
                var html = "screenX:" + e.screenX + "<br/>";
                html += "screenY:" + e.screenY + "<br/><br/>";
                html += "clientX:" + e.clientX + "<br/>";
                html += "clientY:" + e.clientY + "<br/><br/>";
                if (e.pageX == null) {
                    html += "pageX:" + e.x + "<br/>";
                    html += "pageY:" + e.y + "<br/>";
                } else {
                    html += "pageX:" + e.pageX + "<br/>";
                    html += "pageY:" + e.pageY + "<br/>";
                }

                $("#d4").html(html);
            };
        });

        function getScrollTop() {
            var top = (document.documentElement && document.documentElement.scrollTop) ||
              document.body.scrollTop;
            return top;
        }
    </script>
</head>
<body>
    <div id="d1" class="div">div1 height:300px width:1300px</div>
    <div id="d2" class="div">div2 height:300px width:1300px</div>
    <div id="d3" class="div">div3 height:300px width:1300px</div>
    <div id="d4"></div>
</body>
</html>

JQuery、Js獲取元素、滑鼠位置

單機某個元素彈出視窗有時需要動態的獲取元素的位置例如：例如圖片中的彈框，如果紅色單詞向右移動，彈窗會顯示不完整 JQuery 獲得絕對,相對位置的座標方法 //獲取頁面某一元素的絕對X,Y座標 var X = $('#ID').offset().

js和jquery獲取父級元素、子級元素、兄弟元素的方法

最近工作中總遇到取各種父啊子啊兄弟姐妹啊，每次都得查，這次整理個全乎的~ 【js的獲取方式】 function dom(){ var a = document.getElementByIdx_x_x("dom"); var b =

js獲取元素，窗口的寬度、高度

獲取 order margin window document 元素 wid top borde alert($(window).height()); //瀏覽器時下窗口可視區域高度 alert($(document).height()); //瀏覽器時下窗口文檔的高度 a

jquery獲取父級元素、子級元素、兄弟元素的方法

next 返回結果初始對象 clas 祖先 eval p s all jQuery.parent(expr) 找父親節點，可以傳入expr進行過濾，比如$("span").parent()或者$("span").parent(".class") jQuery.par

JS獲取元素樣式之style、currentStyle、getComputedStyle

在js中獲取元素的樣式屬性大多都是用ele.style.attr這種方式，但是這種方式是有侷限性的，該方法只能獲取到行內樣式，獲取不了外部樣式。如果要想獲取元素的外部樣式，可以選用currentStyle屬性和getComputedStyle屬性，但這兩個屬性不能設定樣式,只能獲取樣式，

jq或js父元素、子元素之間頁面元素的獲取，以及使用後臺模板遇到無法將子頁面取到的值顯示在彈出的頁面上的問題

一、jquery 父、子頁面之間頁面元素的獲取，方法的呼叫： 1. 父頁面獲取子頁面元素：格式：$("#iframe的ID").contents().find("#iframe中的控制元件ID").click(); &nbs

js獲取上級、同級和下級元素

1、JQuery.parent(expr)找父親節點，可以傳入expr進行過濾，比如$("#parent").parent() 或者$("#parent").parent(".child") 2、JQuery.parents(expr)查詢所有祖先元素，不限於父元素 3、JQuery.c

jquery 獲取父級元素、子級元素、兄弟元素的方法

jQuery.parent(expr) 找父親節點，可以傳入expr進行過濾，比如("span").parent()或者(“span”).parent(“.class”) jQuery.parents(expr),類似於jQuery.parents(expr)

jQuery 學習03——HTML：捕獲、設置、添加元素、刪除元素、CSS類、CSS()方法、尺寸

baidu bject 字段 document color 一個元素顯示 cnblogs jQuery - 獲取內容text()、html() 以及 val()和屬性attr() jQuery 中非常重要的部分，就是操作 DOM 的能力。 DOM = Document

Javascript入門(二)變量、獲取元素、操作元素

javascrip ima 報錯 nload change -c win attribute ttr 一、變量 Javascript 有五種基本數據類型 number、String、boolean、undefined、null 一種復合類型：object

jquery或者js獲取到元素寬高精確到小數

OS 模式 idt alert 新版老版本保留兼容ie rom 首先我們應該知道用jQuery的width()方法獲取元素的寬高及樣式屬性數值時，如果元素的屬性是浮點數，會自動四舍五入成整數。而如果我們就是想獲取實際的帶小數的屬性數值時該用什麽方法。在使用獲取

jquery-validate.js驗證selcet、checkbox、radio

<form class="public-profile" action="/account/profile" method="post" id='public-profile-form'> <select name="like_product" class="form

JS獲取本週、本季度、本月、上月、本年的開始日期、結束日期

/** * 獲取本週、本季度、本月、上月的開始日期、結束日期 */ var now = new Date(); //當前日期 var nowDayOfWeek = now.getDay(); //今天本週的第幾天 var nowDay = now.getDate(); //當

jquery 遍歷父元素、子元素、兄弟元素

尋找父元素 1. parent()方法，只返回被選元素的直接父元素，只遍歷到上一級的父元素，返回的是一個元素。 2. parents()方法，返回被選元素的所有父元素，一直向上遍歷，直到文件的根元素為止，返回父元素的集合。 3. parentsUntil()方法,a.parentsUntil(

JS日期轉換格式和 JS 獲取今日、昨日、本週、本月、本季度、本年、上月、上週、上季度、去年

// 對Date的擴充套件，將 Date 轉化為指定格式的String // 月(M)、日(d)、小時(h)、分(m)、秒(s)、季度(q) 可以用 1-2 個佔位符， // 年(y)可以用 1-4 個佔位符，毫秒(S)只能用 1 個佔位符(是 1-3 位的數字) // 例子： // (new D

原生 JS 獲取元素的尺寸和位置

關於元素的尺寸和位置，這原本是 CSS 乾的事，但更多的時候需要用 JavaScript 來獲取這些引數，比如一個很好的例子 js 實現的圖片瀑布流。在介紹 JS 中的例子之前，先來說明一下 css 中的元素尺寸。 CSS 中的 width 和 height

Js新增元素、刪除元素誤區詳解【push()和add()；splice()和remove()】

新增元素之誤區一，push()和add()使用及區別 push()方法是給陣列尾巴新增一個或多個元素,返回的是新增陣列後該陣列長度。測試程式碼： var arr = [1,2,3,4]; var arrlength = arr.push(5); console.log("arr

js獲取元素在頁面的位置

很多時候，我們需要獲取元素在頁面的位置! 我們需要明白的是：元素在頁面的位置=該元素相對瀏覽器視窗的位置+瀏覽器滾動條的值我們可以先用getBoundingClientRect()方法來獲得某個元素相對瀏覽器視窗的位置｛這個方法返

js中獲取元素的當前位置

js中獲取當前位置有如下幾種方法： event.offsetX, （IE屬性，測試都可以使用） event.offsetY, （IE屬性，測試都可以使用） event.clientX, event.clienY, event.scrennX, event.sc

jq、js獲取一個頁面中的ajax資料，傳到另一個頁面顯示(通過url傳參方式)

做專案遇到了頁面之間傳輸資料的問題，特別是第一個頁面的資料是使用ajax顯示的，當點選ajax中append的li的時候，開啟另一個頁面，將第一個頁面的資料顯示在另一個頁面上，具體情況如下：一、這是第一個頁面中的js程式碼： //顯示所有該使用者的歌單 function showMusicMe

JQuery、Js獲取元素、滑鼠位置

相關推薦