JavaScript 및 CSS 검토('JavaScript 마스터하기')_javascript 기술

예: elem.style.height 또는 elem.style.height = '100px' 여기서는 기하학적 속성을 설정할 때 크기 단위(예: px)를 지정해야 한다는 점에 유의해야 합니다. 숫자 값 대신 스타일을 나타내는 문자열을 반환합니다(예: 100 대신 '100px'). 또한 elem.style.height와 같은 작업은 요소의 스타일 속성에 설정된 스타일 값을 가져올 수도 있습니다. 스타일을 CSS 파일에 넣으면 위 메서드는 빈 문자열만 반환합니다. 요소의 실제적이고 최종적인 스타일을 얻기 위해 책에서는

코드 복사 코드는 다음과 같습니다. :

//특정 요소(elem)의 스타일 속성(이름)을 가져옵니다.
function getStyle(elem, name) {
　// 해당 속성이 style에 존재하는 경우[] , 그러면 설정되었습니다
//최근(현재)
if(elem.style[name]) return elem.style[name]
//그렇지 않으면 IE의 방법을 사용해 보세요
else if (elem.currentStyle) return elem.currentStyle[name]; //또는 W3C의 메소드(존재하는 경우)
else if (document.defaultView && document.defaultView.getCompulatedStyle) {
　　　/ //textAlign 대신에 전통적인 'text-align' 스타일의 규칙 작성을 사용합니다.
　　　 //textAlign 대신
name = name.replace(/[A-Z]/g, '-$1')
name = name.toLowerCase();//스타일 객체를 가져오고 속성 값을 가져옵니다(존재하는 경우)
　　var s = document.defaultView.getCompulatedStyle(elem,'')
return s && s.getPropertyValue(name) ;
　} else return null
}


페이지에서 요소의 위치를 ​​얻는 방법을 이해하는 것이 대화형 효과를 구성하는 데 핵심입니다. 먼저 CSS의 위치 속성 값의 특성을 살펴보세요.

정적: 정적 위치 지정, 이는 요소 위치 지정의 기본 방법이며 단순히 문서 흐름을 따릅니다. 그러나 요소가 정적으로 배치되면 상단 및 왼쪽 속성이 유효하지 않습니다.
relative: 상대 위치 지정, 요소는 다른 지침의 영향을 받지 않는 한 문서 흐름을 계속 따릅니다. top 및 left 속성을 설정하면 요소가 원래 위치를 기준으로 오프셋됩니다.
절대: 절대 위치 지정. 절대 위치 지정 요소는 문서 흐름에서 완전히 벗어납니다. 해당 위치는 정적으로 위치가 지정되지 않은 첫 번째 상위 요소를 기준으로 표시됩니다. 전체 문서.
고정: 고정 위치 지정은 브라우저 창을 기준으로 요소의 위치를 ​​지정합니다. 브라우저 스크롤바 끌기를 완전히 무시합니다.
저자는 요소의 페이지 위치를 얻기 위한 크로스 브라우저 기능을 캡슐화했습니다.
몇 가지 중요한 요소 속성이 있습니다: offsetParent, offsetLeft, offsetTop(클릭하면 Mozilla 개발자 센터의 관련 페이지로 바로 이동할 수 있습니다)

코드 복사 코드는 다음과 같습니다.

//x(가로,왼쪽)를 찾습니다. ) 요소의 위치

function pageX(elem) {
　 //루트 요소에 있는지 확인하세요
return elem.offsetParent?
//아직 위로 올라갈 수 있다면 , 현재 오프셋을 추가하고 위쪽으로 재귀
　elem.offsetLeft 요소의 페이지 위치
function pageY(elem) {
　 //우리가 루트 요소에 있는지 확인
　 return elem .offsetParent ?
//아직 올라갈 수 있으면 현재 오프셋을 추가하고 위쪽으로 재귀합니다
　 elem.offsetTop pageY(elem.offsetParent) :
//그렇지 않으면 현재 오프셋을 가져옵니다
elem.offsetTop;
}


그런 다음 상위 요소를 기준으로 요소의 가로 및 세로 위치를 가져와야 합니다. DOM을 삭제하고 해당 부모를 기준으로 위치를 지정합니다.

코드 복사

코드는 다음과 같습니다. //요소의 가로 위치 찾기 상위 내 function parentX(elem) { //offsetParent가 요소의 상위인 경우 조기 중단 return elem.parentNode == elem.offsetParent ?

elem.offsetLeft :

// 그렇지 않으면 두 요소 모두에 대해 전체
// 페이지를 기준으로 한 위치를 찾고 차이점을 찾아야 합니다.
pageX(elem) - pageX(elem.parentNode)
//상위 요소 내에서 요소의 수직 위치 찾기
function parentY(elem) {
　 //offsetParent가 요소의 상위인 경우 조기 중단
return elem.parentNode == elem.offsetParent ? 🎜>　elem .offsetTop :
// 그렇지 않으면 두 요소 모두에 대해 전체
// 페이지에 상대적인 위치를 찾고 차이점을 찾아야 합니다.
pageY(elem) - pageY(elem.parentNode );
}


요소 위치의 마지막 문제는 CSS(비정적) 컨테이너 위치를 지정할 때 요소의 위치를 ​​얻는 것입니다. getStyle을 사용하면 이 문제가 쉽게 해결됩니다.

코드 복사 코드는 다음과 같습니다:

//요소의 왼쪽 위치 찾기
function posX(elem) {
　// 계산된 스타일을 가져오고 값에서 숫자를 가져옵니다.
return parsInt(getStyle(elem, 'left'))
}
//요소의 상단 위치 찾기
function posY( elem) {
　/ /계산된 스타일을 가져오고 값에서 숫자를 가져옵니다.
return parsInt(getStyle(elem, 'top'))
}

다음 요소의 위치를 ​​설정하는 것입니다. 매우 간단합니다.

코드 복사 코드는 다음과 같습니다.

//가로 위치 설정 함수 요소
function setX(elem, pos) {
　 //픽셀 단위를 사용하여 'left' CSS 속성 설정
　elem.style.left = pos 'px'
}
// 요소의 수직 위치를 설정하는 함수
function setY(elem, pos) {
　//픽셀 단위를 사용하여 CSS 'top' 속성 설정
　elem.style.top = pos 'px' ;
}

요소의 현재 위치를 조정하는 데 사용되는 두 가지 기능이 더 있는데, 이는 애니메이션 효과에 매우 실용적입니다.

코드 복사 코드는 다음과 같습니다.

//가로에 픽셀 수를 추가하는 함수
//위치 요소
function addX( elem, pos) {
　 //현재 수평 위치를 가져와서 여기에 오프셋을 추가합니다
setX(elem, posX(elem) pos)
} 🎜>//요소의
//세로 위치에 여러 픽셀을 추가하는 데 사용할 수 있는 함수
function addY(elem, pos) {
　//현재 세로 위치를 가져오고 오프셋을 추가하세요
setY (elem, posY(elem) pos)
}

요소의 위치를 ​​얻는 방법을 알아본 후,
요소의 현재 높이와 너비를 가져옵니다.

코드 복사 코드는 다음과 같습니다. :

function getHeight(elem) {
return parseInt( getStyle(elem, 'height'))
}
function getWidth(elem) {
return parseInt (getStyle(elem, 'width'));
}

대부분의 경우 위의 방법으로 충분하지만 일부 애니메이션 상호작용에서는 문제가 발생할 수 있습니다. 예를 들어 0픽셀에서 시작하는 애니메이션의 경우 요소의 높이 또는 너비를 미리 알아야 합니다. 둘째, 요소의 표시 속성이 없음이면 값을 얻을 수 없습니다. 이러한 문제는 모두 애니메이션을 수행할 때 발생합니다. 이를 위해 저자는 요소의 잠재적인 높이와 너비를 얻는 함수를 제공합니다.

코드 복사 코드는 다음과 같습니다.

//요소의 가능한 전체 높이 찾기
function fullHeight(elem) {
　//요소가 표시되면 offsetHeight를 사용하여 높이를 가져옵니다. , getHeight()
　if(getStyle(elem, 'display') != 'none')
　　 return elem.offsetHeight || getHeight(elem)
//그렇지 않으면 다음과 같이 표시를 처리해야 합니다. 요소가 없으므로 보다 정확한 읽기를 위해 CSS 속성을 재설정합니다.
var old = ResetCSS(elem, {
　display:'',
visibility:'hidden',
position:'absolute '
});
//clientHeigh를 사용하여 요소의 전체 높이를 알아보세요. 아직 작동하지 않으면 getHeight 함수를 사용하세요.
var h = elem.clientHeight ||
/ /마지막으로 CSS의 원래 속성을 복원합니다.
restoreCSS(elem, old)
//요소의 전체 높이를 반환합니다.
return h; //요소의 전체 높이 찾기, 가능한 너비
function fullWidth(elem) {
　 // 요소가 표시되면 offsetWidth를 사용하여 너비를 가져옵니다. offsetWidth()를 사용합니다.
if(getStyle(elem, 'display') != 'none')
Return elem.offsetWidth || getWidth(elem)
//그렇지 않으면 디스플레이를 없음으로 처리해야 합니다. 이므로 정확성을 높이기 위해 CSS를 재설정합니다.
var old = ResetCSS(elem, {
　display:'',
visibility:'hidden',
position:'absolute'
읽기 });//clientWidth를 사용하면 요소의 전체 높이를 찾을 수 있습니다. 아직 작동하지 않으면 getWidth 함수를 사용하세요.
var w = elem.clientWidth || getWidth(elem)// 마지막으로 원본 CSS를 복원합니다
restoreCSS(elem , old);
//요소의 전체 너비를 반환합니다.
return w;
}
//CSS 세트를 설정하는 함수입니다. Properties
function ResetCSS(elem, prop) {
var old = {};//각 속성 탐색
for(var i in prop) {
　 //이전 속성 값 기록
old[i] = elem.style[i] ;
　　 //새 값 설정
　elem.style[i] = prop[i];
}
return old; >}
//원래 CSS 속성 복원
function RestoreCSS(elem, prop) {
for(var i in prop)
elem.style[i] = prop[i]
}


그리고 내용이 많아서 내일 계속하겠습니다. 노트북 화면이 너무 작아서 글을 쓸 때마다 계속 전환됩니다. 그리고 앞으로. . . 이제 듀얼 디스플레이를 구입할 시간입니다!