JavaScript offset 은 마우스 좌표 가 져 오기 와 창 내 모듈 드래그 를 실현 합 니 다.

7437 단어 JavaScript마우스 좌표 획득창 내 모듈 드래그
offset
offset 은 오프셋 입 니 다.offset 시리즈 의 관련 속성 을 사용 하면 이 요소 의 위치(오프셋),크기 등 을 동적 으로 가 져 올 수 있 습 니 다.예 를 들 어:
원소 거리 에 포 지 셔 닝 부모 원소 가 있 는 위치
요소 자체 크기 가 져 오기(너비 높이)
주:되 돌아 오 는 수 치 는 단위 가 없습니다.
offset 시리즈 에서 자주 사용 하 는 속성 은:
    element.offsetParent
    이 요소 로 포 지 셔 닝 이 있 는 부모 급 요 소 를 되 돌려 줍 니 다.부모 급 요소 가 포 지 셔 닝 이 없 으 면 body 로 돌아 갑 니 다.
    parentNode 와 offsetParent 는 본질 적 인 차이 가 있 습 니 다.parentNode 는 직접 부모 급 요 소 를 되 돌려 줍 니 다.offsetParent 는 포 지 셔 닝 이 있 는 부모 급 요 소 를 되 돌려 줍 니 다.
    element.offsetTop
    반환 요 소 는 포 지 셔 닝 부모 요소 위의 오프셋 을 가지 고 있 습 니 다.
    element.offsetLeft
    부모 요 소 를 가 진 왼쪽 테두리 의 오프셋 을 되 돌려 줍 니 다.
    element.offsetWidth
    padding,테두리,내용 구역 의 폭 을 포함 하여 자신 을 되 돌려 줍 니 다.단위 가 없 는 값 을 되 돌려 줍 니 다.
    element.offsetHeight
    padding,테두리,내용 구역 의 높이 를 포함 하여 자신 을 되 돌려 줍 니 다.
offset 과 style 의 차이
offset
style
offset 는 임의의 스타일 시트 의 스타일 값 을 얻 을 수 있 습 니 다.
style 은 줄 내 스타일 시트 의 스타일 값 만 얻 을 수 있 고 내장 스타일 을 얻 을 수 없습니다.
offset 시리즈 에서 얻 은 수 치 는 단위 가 없습니다.
4.567914.단위 가 있 는 문자열 을 얻 었 습 니 다.
offsetWidth 는 padding+border+width 를 포함 합 니 다.style.widthpadding 과 border 를 포함 하지 않 는 값 획득
offset Width 등 속성 은 읽 기 전용 속성 입 니 다.할당 할 수 없 는 값 만 가 져 올 수 있 습 니 다.
style 속성 은 읽 기와 쓰기 속성 입 니 다style.width가 져 올 수도 있 고 값 을 부여 할 수도 있 습 니 다.
요소 크기 의 위치 만 가 져 오 려 면 offset 을 사용 하 는 것 이 좋 습 니 다.
요소 스타일 을 수정 하려 면 style 을 사용 하 는 것 이 좋 습 니 다.
사례 1:마우스 의 좌 표를 실시 간 으로 보 여 줍 니 다.
시범 을 보이다 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>      -01</title>
		<style>
			.box {
				width: 500px;
				height: 500px;
				background-color: #55aaff;
				margin-left: 50px;
			}
		</style>
	</head>
	<body>
		<p>          </p>
		<div class="box"></div>
		<script>
			//       ，               
			//   ：
			// 1.            ，e.pageX, e.pageY
			// 2.            , box.offsetLeft, box.offsetTop
			// 3.                   
			//         ！
			const box = document.querySelector(".box");
			box.addEventListener("mousemove", function(e) {
				// console.log(e.pageX, e.pageY);
				// console.log(box.offsetLeft, box.offsetTop);
				const x = e.pageX - this.offsetLeft;
				const y = e.pageY - this.offsetTop;
				box.textContent = `x: ${x}, y: ${y}`;
			});
		</script>
	</body>
</html>
사례 2:드래그 모듈
시범 을 보이다 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>    -02</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .login,
      .modal {
        display: none;
      }
      .login {
        width: 512px;
        height: 280px;
        position: fixed;
        border: #ebebeb solid 1px;
        left: 50%;
        top: 50%;
        background-color: #fff;
        box-shadow: 0 0 20px #ddd;
        z-index: 999;
        transform: translate(-50%, -50%);
        text-align: center;
      }
      .modal {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 998;
      }
      .login-content {
        margin: 100px auto;
        text-align: center;
      }
      .login-content h3:hover,
      .closeBtn:hover {
        cursor: pointer;
      }
      .closeBtn {
        position: absolute;
        right: 10px;
        top: 10px;
      }
      .login h4 {
        margin-top: 10px;
      }
      .login h4:hover {
        cursor: move;
      }
    </style>
  </head>
  <body>
    <div class="login-content">
      <h3 id="openLogin">       </h3>
    </div>
    <div class="login">
      <div class="closeBtn" id="closeBtn">  </div>
      <h4 class="loginHeader">      </h4>
    </div>
    <div class="modal"></div>
    <script>
      //     
      const login = document.querySelector(".login");
      const modal = document.querySelector(".modal");
      const closeBtn = document.querySelector("#closeBtn");
      const openLogin = document.querySelector("#openLogin");
      //       
      openLogin.addEventListener("click", () => {
        modal.style.display = "block";
        login.style.display = "block";
      });
      closeBtn.addEventListener("click", () => {
        modal.style.display = "none";
        login.style.display = "none";
      });
      //         
      // 1.                
      const loginHeader = document.querySelector(".loginHeader");
      loginHeader.addEventListener("mousedown", function (e) {
        const x = e.pageX - login.offsetLeft;
        const y = e.pageY - login.offsetTop;
        const move = function (e) {
          login.style.left = `${e.pageX - x}px`;
          login.style.top = `${e.pageY - y}px`;
        };
        // 2.     
        document.addEventListener("mousemove", move);
        document.addEventListener("mouseup", function () {
          document.removeEventListener("mousemove", move);
        });
      });
    </script>
  </body>
</html>
자 바스 크 립 트 offset 이 마우스 좌표 획득 과 창 내 모듈 드래그 를 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.자 바스 크 립 트 마우스 좌표 획득 과 창 내 모듈 드래그 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부탁드립니다!
JavaScript 동적 디지털 시계 구현
vue-cli 4.5.x 빠 른 구축 프로젝트

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage