CSS는 효과를 달성하기 위해 js 표현식을 사용합니다_경험 교환

IE5 이상 버전에서는 CSS 속성을 Javascript 표현식과 연결하기 위해 CSS에서 표현식 사용을 지원합니다. 여기서 CSS 속성은 요소의 고유 속성이거나 사용자 정의 속성일 수 있습니다. 즉, CSS 속성 뒤에는 자바스크립트 표현식이 올 수 있으며, CSS 속성의 값은 자바스크립트 표현식 계산 결과와 동일합니다. 표현식에서 요소 자체의 속성과 메서드를 직접 참조하거나 다른 브라우저 개체를 사용할 수 있습니다. 표현식은 이 요소의 멤버 함수 내에 있는 것과 같습니다.

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

예를 들어 브라우저의 크기에 따라 요소의 위치를 ​​지정할 수 있습니다.

#myDiv {
위치: 절대;
너비: 100px;
높이: 100px;
왼쪽: 표현식(document.body.offsetWidth - 110 + "px");
top: 표현식(document.body.offsetHeight - 110 + "px");
배경: 빨간색
}

요소의 사용자 정의 속성에 값 할당

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

link1
link2
link3

얼핏 보면 표현식 사용의 이점을 알 수 있지만, 페이지에 수십 또는 수백 개의 링크가 있는 경우에도 여전히 Ctrl+C와 Ctrl+V를 기계적으로 사용하시겠습니까? 게다가 둘을 비교하면 어느 것이 더 중복성을 생성합니까? 더 많은 코드는 어떻습니까?

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

a {star : 표현식(onfocus=this.blur)}
link1
link2
link3


설명: 안의 별표는 임의로 정의한 속성입니다. 원하는 대로 정의할 수 있으며, 표현식()에 포함된 문은 사용자 정의 속성과 표현식 사이에 따옴표가 있다는 것을 잊지 마세요. 핵심은 여전히 ​​CSS이기 때문입니다. 스타일 태그에 배치되고 스크립트에는 없습니다. 자, 페이지의 링크 점선 상자를 한 문장으로 쉽게 제거할 수 있습니다. 하지만 너무 안주하지 마세요. 특수 효과가 CSS 속성 변경으로 인해 발생하면 원래 의도와는 다른 결과가 나올 수 있습니다. 예를 들어 마우스가 들어오고 나가면서 페이지의 텍스트 상자 색상을 변경하려면 자연스럽게
{star : 표현식(onmouseover=this.style.BackgroundColor="#FF0000";
onmouseout=this.style.BackgroundColor="#FFFFFF")}


그런데 결과적으로 스크립트 오류가 나서 쓰는게 맞습니다. 다음과 같이 CSS 스타일을 함수에 정의합니다. Display:

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

예: CSS에서 표현식을 사용하여 인터페이스 개체의 일괄 제어 구현

문제 설명: CSS 스타일을 사용하여 개체 일괄의 클래스 속성을 정의하여 동일한 항목을 지정할 수 있다는 것을 알았습니다. 스타일을 통합합니다. 그러나 동일한 유형의 객체 이벤트를 통합하는 방법은 무엇입니까? 예를 들어 수많은 인터페이스가 있습니다. 마우스가 이 그림을 지나갈 때 그림의 src가 **_over가 된다는 것을 어떻게 알 수 있습니까? jpg?


해결책: CSS의 표현 방법을 사용하세요.
구체적인 구현은 .css의 작성 방법을 참조하세요.

/*이미지 CSS 바꾸기* /
#imgScript { /*여기서 개체 ID를 와일드카드 스타일로 사용하고 CSS 함수도 정의할 수 있습니다.*/
star:expression(
onmouseover = function()
{
/*이미지 바꾸기*/
if(this.hover != null) {
this.name = this.src
this.src = this.src.replace('.jpg', '_over; .jpg');
this.HasChg = 1;
}
},
onmouseout = function()
{
/*원본 사진 복원*/
if (this.HasChg != null){
this.src = this.name;
this.HasChg = null
}
)

}/* imgScript 종료*/