CSS 표현이 뭐죠?-프런트엔드 Q&A-php.cn

CSS 표현이 뭐죠?

青灯夜游

풀어 주다： 2023-01-07 11:42:08

원래의

3652명이 탐색했습니다.

css 표현식은 css 속성 다음에 표현식()을 사용하여 JavaScript 표현식을 연결하는 것입니다. css 속성의 값은 JavaScript 표현식의 결과입니다. 구문 형식은 "css 속성: 표현식(JavaScript 표현식);"입니다.

CSS 표현이 뭐죠?

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3&&javascript 버전 1.8.5, Dell G3 컴퓨터.

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

css 표현식은 css 속성 다음에 표현식()을 사용하여 JavaScript 표현식을 연결하는 것입니다. css 속성의 값은 JavaScript 표현식의 결과입니다.

표현식에서 요소 자체의 속성과 메서드를 직접 참조하거나 다른 브라우저 개체를 사용할 수 있습니다. 표현식은 이 요소의 멤버 함수 내에 있는 것처럼 나타납니다.

위의 내용이 좀 모호하다고 느껴지시나요? 그것은 중요하지 않습니다. 단지 알아야 할 사항은 표현식을 통해 CSS 파일에 Javascript 스크립트를 작성할 수 있고 이를 사용하여 매우 편리한 기능과 효과를 얻을 수 있다는 것입니다.

표현 적용:

1. 요소의 고유 속성에 값을 할당합니다. 다음 예는 브라우저 크기에 따라 요소를 배치하는 것입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mid.lt263.com/mb</title>
<style type="text/css">
#myDiv {
position: absolute;
width: 100px;
height: 100px;
background:#c00;
left: expression(document.body.offsetWidth - 180   "px");
top: expression(document.body.offsetHeight - -80   "px");
text-align:center;
line-height:90px;
color:#fff;
}
</style>
</head>
<body>
<div id="myDiv">mb5u.com</div>
</body>
</html>

로그인 후 복사

2. 요소의 사용자 정의 속성에 값을 할당합니다.

다음 예를 살펴보겠습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mid.lt263.com/mb</title>
<style type="text/css">
a {star:expression(this.onFocus=this.blur())}
</style>
</head>
<body>
<a href="#" _fcksavedurl="#">模板天下 - mid.lt263.com/mb
</p>
</body>
</html>

로그인 후 복사

설명: 안에 있는 별표는 임의로 정의한 속성입니다. 표현식() 명령문은 JS 스크립트입니다. 사용자 정의 속성과 표현식 사이에 따옴표가 있다는 것을 잊지 마십시오. 본질은 여전히 CSS이므로 스크립트 대신 스타일 태그에 배치됩니다. 이렇게 하면 페이지의 링크 점선 상자를 한 문장으로 쉽게 제거할 수 있습니다. 특별한 주의가 필요한 사항: 표현식을 사용해야 하는 매우 특별한 필요가 없는 한 일반적으로 표현식을 사용하지 않는 것이 좋습니다. 표현식에는 상대적으로 많은 브라우저 리소스가 필요하기 때문입니다.

참고:

CSS 표현식은 CSS 속성을 동적으로 설정하는 강력하지만 위험한 방법입니다. Internet Explorer는 버전 5부터 CSS 표현식을 지원합니다. 아래 예에서는 CSS 표현식을 사용하여 매 시간마다 배경색을 전환할 수 있습니다.

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

로그인 후 복사

위와 같이 표현식에는 JavaScript 표현식이 사용됩니다. CSS 속성은 JavaScript 표현식의 평가를 기반으로 설정됩니다. 표현 방법은 다른 브라우저에서는 작동하지 않으므로 크로스 브라우저 설계에서는 Internet Explorer용으로 특별히 설정해 두는 것이 유용합니다.

표현의 문제점은 우리가 생각하는 것보다 더 자주 평가된다는 점입니다. 페이지를 표시하고 확대할 때뿐만 아니라 페이지를 스크롤할 때, 마우스를 움직여도 다시 계산됩니다. CSS 표현식에 카운터를 추가하여 표현식이 평가되는 빈도를 추적합니다. 페이지 위에서 마우스를 움직이는 것만으로 10,000개 이상의 계산을 쉽게 수행할 수 있습니다.

CSS 표현식이 평가되는 횟수를 줄이는 한 가지 방법은 일회성 표현식을 사용하는 것입니다. 이 표현식은 처음 실행될 때 지정된 스타일 속성에 결과를 할당하고 이 속성을 사용하여 CSS 표현식을 대체합니다. 페이지 주기 동안 스타일 속성을 동적으로 변경해야 하는 경우 CSS 표현식 대신 이벤트 핸들러를 사용하는 것이 실행 가능한 옵션입니다. CSS 표현식을 사용해야 하는 경우 해당 표현식은 수천 번 평가되며 페이지 성능에 영향을 미칠 수 있다는 점을 기억하세요.

(학습 영상 공유: css 영상 튜토리얼)

위 내용은 CSS 표현이 뭐죠?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!