Javascript 동적 연산 CSS_javascript 기술에 대한 자세한 설명

1. js를 사용하여 CSS 속성을 조작하는 방법

1. 대시가 없는 CSS 속성의 경우 일반적으로 스타일 속성 이름을 직접 사용합니다.

예: obj.style.margin, obj.style.width, obj.style.left, obj.style.position

2. 밑줄이 포함된 CSS 속성의 경우 각 밑줄을 제거하고 각 밑줄 뒤의 첫 번째 문자를 대문자로 바꿉니다.

예: obj.style.marginTop, obj.style.borderLeftWidth, obj.style.zIndex, obj.style.fontFamily 등

3. CSS float 속성을 작동하기 위한 js의 특수 작성 방법

float은 JavaScript의 예약어이므로 obj.style.float를 직접 사용할 수 없습니다. 이 작업은 유효하지 않기 때문입니다. 올바른 사용 방법은 다음과 같습니다: IE: obj.style.styleFloat, Mozilla(gecko), ff 등과 같은 다른 브라우저는 styleFloat: obj.style.cssFloat를 사용합니다.

2. js를 사용하여 CSS 속성 값 얻기

1. 인라인 스타일: obj.style 속성 이름을 가져옵니다.

JS가 CSS 속성 값을 가져옵니다

클래스에 액세스할 수 없습니다.

2. 클래스 내부 및 링크 외부에서 Css 속성 가져오기: IE는 obj.currentStyle["property name"] 메서드를 사용하는 반면 FF는 getCompulatedStyle 메서드를 사용합니다.

3. js를 사용하여 CSS 속성에 값을 할당합니다

1. 클래스 속성 지정

할당: document.getElementById('ceil').className = "class1";

값이 여러 개인 경우: document.getElementById('ceil').className = "class1 class2 class3";

2. obj.style.cssText는 개체의 CSS 스타일을 설정합니다.

document.getElementById('navition').style.cssText = "귀하의 CSS 코드';

요약

페이지에 적용된 스타일을 동적으로 수정하는 방법을 아는 것은 세련된 대화형 웹 페이지를 만드는 데 매우 유용합니다. 이 기사에 설명된 지식은 JavaScript 애니메이션과 같은 고급 기술의 기초를 형성합니다. 동적 스타일 수정은 책임감 있게 사용해야 하며 과도하게 사용하지 않아야 한다는 점에 유의하는 것이 중요합니다. 앞서 언급했듯이 스타일 수정은 웹 효율성도 향상시킬 수 있습니다. 콘텐츠를 표시하고 숨기면 클라이언트와 서버 간의 불필요한 데이터 상호 작용을 방지하는 데 도움이 됩니다.