JavaScript CSS 수정 학습 2장 스타일_기본지식

또한 때로는 요소나 링크에 추가된 스타일의 특정 콘텐츠를 알고 싶을 수도 있습니다. style 속성은 요소의 인라인 스타일만 읽을 수 있으므로 다른 스타일을 읽으려면 다른 방법을 찾아야 합니다.

Offset
몇 가지 트릭을 사용하기 전에 IE와 Mozilla는 더 나은 방법인 offsetSomething을 추가했습니다. 이러한 속성을 사용하면 이 단락의 더 중요한 스타일 중 일부를 읽을 수 있습니다.
예를 들어 offsetWidth를 사용하세요. 이 단락의 현재 너비의 픽셀 값을 알 수 있습니다. 테스트하려면 창 크기를 조정하고 다시 실행할 수 있습니다.
코드도 매우 간단합니다.

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

function getOff( )
{
x = document.getElementById('test');
return x.offsetWidth;
}

그런 다음 이 값을 경고 상자의 형태:alert('offsetWidth = ' getOff()).
이제 사용자 브라우저에 이 단락의 픽셀 값이 있으므로 몇 가지 계산을 수행할 수 있습니다. 읽을 수 있는 다른 속성은 다음과 같습니다.
offsetHeight: 높이의 픽셀 값
offsetLeft: 왼쪽 거리의 픽셀 값(남은 것은 무엇입니까? 아래 참조)
offsetTop: 높이의 픽셀 값 위의 거리(위의 내용은 무엇입니까? 아래 참조)
offsetWidth: 너비의 픽셀 값
이러한 속성은 읽기 전용이며 직접 수정할 수 없습니다.
설명의 편의를 위해 작은 코드를 준비했습니다. 먼저 이 단락을 위로 이동하세요.
그런 다음 너비에 100픽셀을 추가합니다. 이때 offsetWidth를 보면 변화가 보입니다. 100픽셀씩 줄여서 볼 수도 있습니다.
두 가지 브라우저로 보시면 차이가 있을 수 있습니다. IE에서는 원래 너비가 100픽셀이지만 Mozilla에서는 그렇지 않습니다. Mozilla는 더 표준적이기 때문에 내용의 너비만 확인하는 반면 IE는 여백과 테두리의 너비를 추가합니다. Mozilla가 더 정확하지만 IE가 더 직관적이기 때문에 IE를 선호합니다.
Mozilla/IE 호환성에 신경쓰지 않는다면 코드는 매우 간단합니다.

코드 복사 코드

functionchangeOff(amount)
{
var y = getOff()
x.style.width = y amount; >

변경할 값의 양을 함수에 전달한 다음 getOff() 함수를 사용하여 원래 크기를 가져와 y에 저장합니다. 마지막으로 원래 크기와 그 값을 사용합니다. 요소의 크기를 조정하려면 변경해야 합니다.

offsetWidth/Top
해당 정의는 이전 장을 참조하세요.

스타일 가져오기
오프셋 속성에는 큰 한계가 있음을 알 수 있습니다. 브라우저는 요소 스타일에 액세스할 수 있는 좀 더 편리한 방법을 제공하지만 안타깝게도 오프셋만큼 안정적이고 다재다능하지 않습니다.
Mozilla와 Opera
Mozilla와 Opera는 JavaScript 대신 CSS 스타일 표현을 선호합니다. 예를 들어 글꼴 크기를 얻으려면 JavaScript의 글꼴 크기 대신 CSS의 글꼴 크기를 사용해야 합니다.
Mozilla는 매우 적은 스타일을 지원합니다. 예를 들어 Mozilla에서는 border[-something]에 null 값이 있지만 Opera에서는 정확한 값을 제공할 수 있습니다.
IE
IE에서는 많은 스타일 정보를 얻을 수 있지만 주의해야 합니다. 이 예에서는 테두리가 작동하지 않습니다. borderStyle, borderWidth, borderColor가 필요합니다.
자바스크립트에서는 border-width 속성을 borderWidth로 표기해야 합니다. 이 연결선은 마이너스 기호로 간주될 수 있기 때문입니다.
또한 IE에서는 auto 값을 제공하는 경우가 많습니다. 이는 실제 가치이지만 거의 쓸모가 없습니다. 그래서 때로는 오프셋을 사용해야 할 때도 있습니다.

코드
코드는 여전히 매우 간단합니다.

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

function getStyle(el,styleProp)

{
var x = document.getElementById(el)
if (x.currentStyle)
var y = x.currentStyle [styleProp];
else if (window.getCompulatedStyle)
var y = document.defaultView.getComputeStyle(x,null).getPropertyValue(styleProp)
return y; 🎜>
먼저 요소의 ID와 액세스하려는 스타일의 이름을 전달합니다.

코드 복사

코드는 다음과 같습니다: function getStyle( el,styleProp) {
그런 다음 document.getElementById(el)에 요소를 저장합니다.

첫 번째는 IE 메서드입니다. 요소의 currentStyle 속성입니다. 코드 복사

코드는 다음과 같습니다.

if (x.currentStyle) 2 var y = x.currentStyle[styleProp]
그런 다음 Mozilla 메서드: getComputeStyle( ) 메서드는 Opera에서도 가능합니다

[code] else if (window.getCompulatedStyle) var y = document.defaultView.getComputeStyle(x,null).getPropertyValue(styleProp) 그런 다음 이 함수를 호출하는 프로그램에 y를 반환합니다.

코드 복사


코드는 다음과 같습니다.

return y; >
완벽하지는 않지만 아직까지는 가능한 수준입니다.

번역 주소: http://www.quirksmode.org/dom/getstyles.html 재인쇄를 위해 다음 정보를 보관해 주세요. 저자: Bei Yu(tw: @rehawk)