당신이 모를 수도 있는 JavaScript 및 CSS와 상호 작용하는 5가지 방법_javascript 기술

브라우저가 계속해서 업그레이드되고 개선됨에 따라 CSS와 JavaScript 사이의 경계가 점점 흐려지고 있습니다. 원래 그들은 완전히 다른 기능을 담당했지만 결국에는 모두 웹 프런트엔드 기술에 속하며 서로 긴밀하게 협력해야 합니다. 우리 모두는 웹 페이지에 .js 파일과 .css 파일을 가지고 있지만 이것이 CSS와 js가 독립적이고 상호 작용할 수 없다는 의미는 아닙니다. 여러분은 JavaScript와 CSS가 함께 작동할 수 있는 다섯 가지 방법을 알지 못할 수도 있습니다!

JavaScript를 사용하여 의사 요소(pseudo-element) 속성 가져오기

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

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

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

// .element:before
의 콘텐츠 값 가져오기 var content = window.getCompulatedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('content');

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

classList API

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

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

myDiv.classList.add('myCssClass') // 클래스 추가
myDiv.classList .remove ('myCssClass'); // 클래스 제거
myDiv.classList.toggle('myCssClass'); // 클래스 토글

오랫동안 구현되어 왔으며 마침내 IE10에서 구현되었습니다.

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

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

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

function addCSSRule(sheet, selector, rule, index) {
if(sheet.insertRule) {
sheet.insertRule(selector "{" rule "}", index);
}
else {
sheet.addRule(selector, rule, index);
}
}
// 사용하세요!
addCSSRule(document.styleSheets[0], "header ", " float: left");

이 방법은 일반적으로 새 스타일 규칙을 만드는 데 사용되지만 기존 규칙을 수정하려는 경우 다음을 수행할 수 있습니다. 또한 이렇게 하십시오.

CSS 파일 로드

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

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

curl(
[
"namespace/MyWidget",
"css!namespace/resources/MyWidget.css"
],
function(MyWidget) {
// MyWidget에서 작업할 수 있습니다.
// 이 CSS 파일은 필요하지 않기 때문에 여기에는 참조가 없습니다.
// 페이지에 로드만 하면 됩니다.
}
});

모든 리소스가 로드되면 콜백 함수가 실행되며 콜백 함수에서 로드할 수 있습니다. 매우 유용합니다!

CSS 마우스 포인터 이벤트

CSS 마우스 포인터 이벤트 포인터 이벤트 속성은 매우 흥미롭습니다. 이 속성을 없음으로 설정하면 비활성화를 효과적으로 방지할 수 있습니다. 이 요소에 대해 "그래서 뭐?"라고 말할 수도 있지만 실제로는 이 요소에 대한 JavaScript 이벤트나 콜백 기능이 비활성화됩니다.

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

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

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

아직 발견하지 못한 CSS 및 JavaScript와 상호작용하는 5가지 방법입니다. 새로운 발견이 있나요? 공유하세요!