CSS 표현 사용 소개_CSS/HTML

IE5 이상 버전에서는 CSS 속성을 Javascript 표현식과 연결하기 위해 CSS에서 표현식 사용을 지원합니다. 여기서 CSS 속성은 요소의 고유 속성이거나 사용자 정의 속성일 수 있습니다.

CSS 속성 뒤에는 Javascript 표현식이 올 수 있으며, CSS 속성의 값은 Javascript 표현식 계산 결과와 같습니다. ?표현식에서 요소 자체의 속성과 메서드를 직접 참조하거나 다른 브라우저 개체를 사용할 수 있습니다. 표현식은 이 요소의 멤버 함수 내에 있는 것과 같습니다.

요소의 고유 속성에 값을 할당합니다

예를 들어 브라우저 크기에 따라 요소를 배치할 수 있습니다.

#myDiv?{
위치:?absolute;
너비:?100px;
높이:?100px;
왼쪽:?expression(document.body.offsetWidth?-?110?+ ?"px");
top:?expression(document.body.offsetHeight?-?110?+?"px");
배경:?red;
}

요소의 맞춤 속성에 값 할당

예를 들어 페이지에서 링크 파선 상자를 제거하세요. ?일반적인 접근 방식은 다음과 같습니다.

link1
link2
link3?

언뜻 보면 표현을 사용하는 것의 장점이 명확하지 않을 수 있지만, 페이지에 수십, 심지어 수백 개의 링크가 있는 경우에도 Ctrl+C와 Ctrl+V를 기계적으로 사용하시겠습니까? , 어느 것이 더 중복된 코드를 생성합니까?

표현식의 사용방법은 다음과 같습니다.?

a?{star?:?expression(onfocus=this.blur)}

link1
link2
?

설명: 안에 있는 별표는 사용자가 정의한 속성입니다. 원하는 대로 정의할 수 있습니다. 그런 다음 표현식()에 포함된 문은 사용자 정의 속성과 사이에 다른 속성이 있다는 것을 잊지 마세요. 표현식. 본질은 여전히 ​​CSS이기 때문에 s?script 대신 스타일 태그에 배치됩니다. 좋습니다. 이렇게 하면 페이지에서 점선으로 표시된 링크 상자를 한 문장으로 쉽게 제거할 수 있습니다. 하지만 너무 안주하지 마세요. 특수 효과가 CSS 속성 변경으로 인해 발생하면 원래 의도와는 다른 결과가 나올 수 있습니다. 예를 들어 마우스의 움직임에 따라 페이지의 텍스트 상자 색상을 변경하려면 자연스럽게 ?

로 써야 한다고 생각할 수도 있습니다.

입력?
{star?:?expression(onmouseover=this.style.BackgroundColor="#FF0000";
onmouseout=this .style.BackgroundColor="#FFFFFF")}


input?{star?:?expression(onmouseover=this .style.BackgroundColor="#FF0000";
onmouseout=this.style.BackgroundColor="#FFFFFF")}

하지만 결과는 스크립트 오류입니다. 올바른 작성 방법은 아래와 같이 함수에 CSS 스타일 정의를 작성하는 것입니다.

입력?{star?:?expression(onmouseover=function()
{this.style.BackgroundColor="#FF0000"},
onmouseout=function(){this.style.groundColor="#FFFFFF"})?}



?

주목

표현식에는 상대적으로 많은 브라우저 리소스가 필요하므로 일반적으로 표현식을 사용하지 않는 것이 좋습니다.