JavaScript 및 CSS_javascript 기술과 상호 작용하는 방법 요약

JavaScript를 사용하여 의사 요소 속성 가져오기

스타일 속성을 통해 요소의 CSS 스타일 값을 얻는 방법은 누구나 알고 있지만 의사 요소의 속성 값을 얻을 수 있나요? 예, JavaScript를 사용하여 페이지의 의사 요소에 액세스할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

// .element:before
의 색상 값을 가져옵니다. var color = window.getCompulatedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('color');
// .element:before
의 콘텐츠 값을 가져옵니다. var 콘텐츠 = window.getCompulatedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('content');

보세요. 의사 요소의 콘텐츠 속성 값에 액세스할 수 있습니다. 역동적이고 세련된 웹사이트를 만들고 싶다면 매우 유용한 기술입니다!

클래스리스트 API

많은 JavaScript 도구 라이브러리에는 addClass,removeClass,toggleClass와 같은 메소드가 있습니다. 기존 브라우저와의 호환성을 위해 이러한 클래스 라이브러리에서 사용하는 방법은 먼저 요소의 className을 검색하고 클래스를 추가 및 삭제한 다음 className을 업데이트하는 것입니다. 실제로 classList라는 CSS 클래스 속성을 추가, 삭제 및 반전하는 메서드를 제공하는 새로운 API가 있습니다.

코드 복사 코드는 다음과 같습니다.

myDiv.classList.add('myCssClass'); // 클래스 추가
myDiv.classList.remove('myCssClass'); // 클래스 제거
myDiv.classList.toggle('myCssClass'); // 클래스를 전환합니다

ClassListAPI는 오랫동안 대부분의 브라우저에서 구현되어 왔으며, 마침내 IE10에서 구현되었습니다.

스타일 시트에 스타일 규칙을 직접 추가 및 삭제

우리 모두는 element.style.propertyName을 사용하여 스타일을 수정하는 데 매우 익숙합니다. JavaScript를 사용하면 이 작업에 도움이 되지만 기존 CSS 스타일 규칙을 추가하거나 수정하는 방법을 알고 계십니까? 실제로는 매우 간단합니다.

코드 복사 코드는 다음과 같습니다.

함수 addCSSRule(시트, 선택기, 규칙, 인덱스) {
if(sheet.insertRule) {
sheet.insertRule(selector "{" 규칙 "}", index);
}
그렇지 않으면 {
sheet.addRule(선택기, 규칙, 색인);
}
}
// 활용해보세요!
addCSSRule(document.styleSheets[0], "header", "float: left");

이 방법은 일반적으로 새로운 스타일 규칙을 만드는 데 사용되지만, 기존 규칙을 수정하려는 경우에도 그렇게 할 수 있습니다.

CSS 파일 로드

이미지, JSON, 스크립트 등의 지연 로딩은 페이지 표시 속도를 높이는 좋은 방법입니다. 우리는 컬.js와 같은 JavaScript 로더를 사용하여 이러한 외부 리소스를 지연 로드할 수 있지만 CSS 스타일 시트도 지연 로드될 수 있으며 로드가 성공한 후에 콜백 함수가 이를 알려준다는 사실을 알고 계셨습니까?

코드 복사 코드는 다음과 같습니다.

컬(
[
"네임스페이스/MyWidget",
"css!namespace/resources/MyWidget.css"
],
함수(MyWidget) {
// MyWidget을 실행할 수 있습니다
// 필요하지 않기 때문에 여기에는 이 CSS 파일에 대한 참조가 없습니다.
// 페이지에 로드하기만 하면 됩니다
}
});

이 웹사이트에 사용된 PrismJS 구문 강조 스크립트는 지연 로드됩니다. 모든 리소스가 로드되면 콜백 함수가 실행되고 이를 콜백 함수에서 로드할 수 있습니다. 매우 유용합니다!

CSS 마우스 포인터 이벤트

CSS 포인터 이벤트 속성은 JavaScript와 매우 유사하게 작동합니다. 이 속성을 없음으로 설정하면 "그래서 뭐?"라고 말할 수도 있습니다. 실제로 이 요소에 대한 JavaScript 이벤트나 콜백 기능이 비활성화됩니다!

코드 복사 코드는 다음과 같습니다.

.disabled { 포인터 이벤트: 없음 }

이 요소를 클릭하면 이 요소에 배치한 리스너가 어떤 이벤트도 트리거하지 않는다는 것을 알 수 있습니다. 정말 환상적인 기능입니다. 이벤트가 트리거되는 것을 방지하기 위해 더 이상 특정 CSS 클래스가 존재하는지 확인할 필요가 없습니다.

위 내용은 제가 요약한 JavaScript 및 CSS와 상호작용하는 5가지 방법입니다. 더 좋은 방법이 있으면 알려주시기 바랍니다.