ppk가 JavaScript 스타일 속성_javascript 기술에 대해 이야기합니다.

실제로 7개의 샘플 스크립트는 모두 CSS 수정 형식을 사용합니다. 예를 들어, "Form Validation"은 오류가 있는 양식 필드의 스타일을 변경하고, "XMLHTTP Speed ​​​​Tester"는 애니메이션 (실제로 짧은 시간에 여러 번 스타일을 변경)을 사용하여 사용자의 속도 데이터에주의를 환기시킵니다. (그리고 솔직히 말해서 이것은 약간 멋진 효과입니다). 드롭다운 메뉴는 스타일을 변경하여 메뉴 항목을 표시하고 숨깁니다. 이러한 변경 사항은 모두 동일한 목적을 가지고 있습니다. 즉, 이러한 요소에 사용자의 관심을 끌기 위한 것입니다.

JavaScript에는 CSS를 수정하는 4가지 방법이 있습니다.

l 요소의 스타일 속성을 수정합니다(element.style.margin='10%').

l 요소 클래스 또는 ID(element.className='error')를 변경하면 브라우저는 새 클래스 또는 ID에 정의된 스타일을 자동으로 적용합니다.

l 문서에 새 CSS 명령을 작성합니다(document.write( '');

l 전체 페이지의 스타일 시트를 변경합니다.

대부분의 CSS 변경 스크립트는 스타일 속성을 수정하거나 문서의 클래스 또는 ID를 변경하는 방법을 사용합니다. .write 메소드는 페이지의 접근성을 향상시키기 위해 특정 상황에만 적합합니다. 마지막으로 모든 브라우저가 이를 지원하는 것은 아니며 일반적으로 일부만 변경하려고 하기 때문에 전체 스타일 시트를 거의 변경하지 않습니다. >어쨌든 예제 스크립트에서는 4가지 방법을 모두 사용하고 이 장에서 이러한 방법이 적용 가능한 위치를 살펴보겠습니다.

CSS를 수정하는 가장 잘 알려진 방법은 다음과 같습니다. 모든 HTML 요소가 소유한 스타일 속성을 통해 인라인 스타일에 액세스합니다. 스타일 객체에는 각 인라인 CSS 속성에 해당하는 속성이 포함되어 있습니다. 요소의 CSS 속성 여백을 설정하려면 element.style.margin을 사용하세요. CSS 속성 색상을 설정하려면 element.style.color JavaScript 속성을 사용하세요.

인라인 스타일

기억하세요: HTML 요소의 스타일 속성은 인라인 스타일에 대한 액세스를 제공합니다.

몇 가지 CSS 이론을 검토해 보겠습니다. CSS는 요소에 대한 스타일 시트를 정의하는 4가지 방법을 제공합니다. 즉, HTML 태그의 스타일 속성에 CSS를 직접 작성할 수 있습니다. 🎜>
게다가 사용된 방법에 관계없이 스타일 시트를 포함, 링크 또는 가져올 수 있습니다. 인라인 스타일은 다른 스타일 형식보다 더 명시적이므로 인라인 스타일은 포함, 링크 또는 가져온 스타일을 재정의할 수 있습니다. . 페이지의 스타일시트에 정의된 스타일. 스타일 속성은 이러한 인라인 스타일에 액세스할 수 있으므로 항상 다른 스타일을 무시할 수 있습니다.

그러나 스타일을 검색할 때 문제가 발생할 수 있습니다. >

텍스트

p#test {

여백: 10%

}

alert(document.getElementById ('test').style.margin);

테스트 단락에는 인라인 스타일이 포함되어 있지 않습니다. 여백: 10%는 포함된(또는 링크된 또는 가져온) 스타일 시트에서 정의됩니다. 스타일 속성에서 읽을 수 없습니다. 팝업 경고 상자가 비어 있습니다.

다음 예에서는 이제 여백이 인라인 스타일로 정의되었기 때문에 팝업 경고 상자에 반환 결과 "10%"가 표시됩니다.


텍스트


alert(document.getElementById('test').style.margin);

따라서 style 속성은 스타일을 설정하는 데 가장 적합하지만 스타일을 가져오는 데에는 그다지 유용하지 않습니다. 나중에 페이지에 포함되거나 링크되거나 소개된 스타일 시트에서 스타일을 얻는 방법에 대해 논의하겠습니다.

대시

대부분의 CSS 속성 이름에는 글꼴 크기와 같은 대시가 포함되어 있습니다. 그러나 JavaScript에서 대시는 마이너스를 나타내기 때문에 속성 이름에는 사용할 수 없습니다. 이렇게 하면 오류가 발생합니다.

element.style.font-size = '120%';

브라우저에게 element.style.font 변수 크기에서 (정의되지 않음)을 빼도록 요청합니다. ? = '120%'라면 무엇을 의미하나요? 대신 브라우저는 camelCase 속성 이름을 예상합니다.

element.style.fontSize = '120%';

일반적인 규칙은 CSS 속성 이름에서 대시와 그 뒤의 문자를 모두 제거하는 것입니다. 대시는 대문자가 됩니다. 이런 식으로 margin-left는 marginLeft가 되고, text-decoration은 textDecoration이 되며, border-left -style은 borderLeftStyle이 됩니다.

단위

CSS에서 선언할 때와 마찬가지로 JavaScript의 많은 숫자 값에는 단위가 필요합니다. FontSize=120은(는) 무슨 뜻인가요? 120픽셀, 120포인트 또는 120%? 브라우저는 이를 모르므로 아무 작업도 수행하지 않습니다. 의도를 명확히 하려면 단위가 필수입니다.

setWidth() 함수를 예로 들면 "XMLHTTP Speedometer"의 애니메이션 효과를 구현하는 핵심 프로그램 중 하나입니다.

[XMLHTTP Speedometer, line 70-73]

function setWidth(width) {

if (width
document.getElementById('meter').style.width = width 'px' ;

}

이 함수는 값을 인수하고 미터의 너비를 이 새로운 값으로 변경합니다. 안전 점검을 통해 값이 0보다 큰지 확인한 후 요소의 style.width를 이 새로운 너비 값으로 설정하세요. 끝에 'px'를 추가하세요. 그렇지 않으면 브라우저가 값을 해석하는 방법을 모르고 아무 작업도 하지 않을 수 있기 때문입니다.

'px'를 잊지 마세요

너비나 높이 뒤에 'px' 단위를 추가하는 것을 잊어버리는 것은 일반적인 CSS 수정 오류입니다.

CSS 쿼크 모드에서는 브라우저가 이전 규칙을 따르고 단위 없는 값을 픽셀 값으로 처리하므로 'px'를 추가할 필요가 없습니다. 이것은 그 자체로는 문제가 되지 않지만, 많은 웹 개발자는 너비나 높이 값을 변경한 다음 단위 추가를 잊어버리는 습관에 빠져 CSS 엄격 모드에서 작업할 때 문제를 일으킵니다.

스타일 가져오기

경고: 다음 콘텐츠에는 브라우저 호환성 문제가 있습니다.

본 바와 같이 스타일 속성은 페이지에 포함되거나 링크되거나 가져온 스타일 시트에 설정된 스타일을 읽을 수 없습니다. 그러나 웹 개발자는 때때로 이러한 스타일을 읽어야 하기 때문에 Microsoft와 W3C 모두 비인라인 스타일에 액세스하는 방법을 제공합니다. Microsoft의 솔루션은 Explorer에서만 작동하는 반면 W3C 표준은 Mozilla 및 Opera에서 작동합니다.

Microsoft의 솔루션은 다음 두 가지를 제외하고는 스타일 속성과 정확히 동일하게 작동하는 currentStyle 속성입니다.

l 인라인 스타일뿐만 아니라 모든 스타일에 액세스할 수 있으므로 스타일을 보고합니다. 실제로 요소에 적용됩니다.

l 읽기 전용이므로 스타일을 설정할 수 없습니다.

예:

var x = document.getElementById('test');

alert(x.currentStyle.color)

대화 상자가 나타납니다. 정의된 위치에 상관없이 상자에 요소의 현재 색상 스타일이 표시됩니다.

W3C의 솔루션은 유사하지만 더 복잡한 구문으로 작동하는 window.getComputeStyle() 메서드입니다.

var x = document.getElementById('test')

alert(window.getCompulatedStyle(x,null).color);

getCompulatedStyle()은 원래 스타일이 50em 또는 11%일 수 있지만 항상 픽셀 값을 반환합니다.

이전과 마찬가지로 비호환성이 발생하면 모든 브라우저를 만족시키기 위해 일부 코드 분기가 필요합니다.

function getRealStyle(id,styleName) {

var element = document.getElementById (id);

var realStyle = null;

if (element.currentStyle)

realStyle = element.currentStyle[styleName]

else if (window.getCompulatedStyle)

realStyle = window.getComputeStyle(element,null)[styleName];

return realStyle;

을 사용할 수 있습니다. 이 함수는 다음과 같습니다.

var textDecStyle = getRealStyle('test','textDecoration');

getCompulatedStyle()은 항상 픽셀 값을 반환하며 currentStyle은 원래 정의된 단위를 유지합니다. CSS.

약어 스타일

경고 다음 콘텐츠에는 브라우저 호환성 문제가 있습니다.

style 속성을 통해 인라인 스타일을 얻거나 방금 논의한 기능을 통해 다른 스타일을 얻거나, 축약된 스타일을 읽으려고 하면 문제에 직면하게 됩니다.

이 테두리의 정의를 보세요


텍스트


인라인 스타일이므로 다음 코드 줄이 작동할 것으로 예상할 수 있습니다.

alert(document.getElementById('test').style.border)

아쉽게도 그럴 수 없습니다. 팝업 대화 상자에 표시되는 정확한 값은 브라우저마다 일치하지 않습니다.

l Explorer 6에서는 #cc0000에 1px 솔리드를 제공합니다.

l Mozilla 1.7.12는 1px 솔리드 RGB(204,0,0)를 제공합니다.

l Opera 9는 1px 솔리드 #cc0000을 제공합니다.

l Safari 1.3에서는 테두리 값을 제공하지 않습니다.

문제는 border가 약식 선언이라는 것입니다. 여기에는 너비, 스타일, 위쪽, 왼쪽, 아래쪽 및 오른쪽 테두리의 색상 등 12개 이상의 스타일이 암시적으로 포함됩니다. 마찬가지로 글꼴 선언은 글꼴 크기, 글꼴 모음, 글꼴 두께 및 줄 높이에 대한 약식이므로 비슷한 문제가 나타납니다.

rgb()

Mozilla에서 사용하는 특수 색상 구문인 rgb(204,0,0)에 유의하세요. 이는 기존 #cc0000에 대한 유효한 대안입니다. CSS와 JavaScript 사이의 구문을 선택할 수 있습니다.

브라우저는 이러한 축약된 선언을 어떻게 처리합니까? 위의 예는 너무 직접적인 것처럼 보입니다. 브라우저가 1px 솔리드 #cc0000을 반환하여 인라인 스타일에 정의된 것과 일치하는지 확인해야 한다고 직관해야 합니다. 불행히도 속기 속성은 그보다 더 복잡합니다.

다음 상황을 고려하세요.

p {

border: 1px solid #cc0000;

}

테스트

alert(document.getElementById('test').style.borderRightColor);

경계 오른쪽은 인라인 스타일 색상에 포함되지 않지만 모든 브라우저는 올바른 색상을 보고합니다. 대신 border-color를 선언합니다. 분명히 브라우저는 전체 테두리 색상이 설정될 때 오른쪽 테두리의 색상이 설정된다고 생각하는 것 역시 논리적입니다.

보시다시피 브라우저는 이러한 예외에 대한 규칙을 만들어야 하며 약간 다른 방식으로 단축 선언을 처리하기로 선택했습니다. 축약된 속성을 처리하기 위한 명확한 사양이 없으면 어떤 브라우저가 옳고 그른지 판단하기 어렵습니다.