브라우저가 계속 업그레이드되고 향상됨에 따라 CSS와 JavaScript의 경계가 점점 더 흐려지고 있습니다. 원래 그들은 완전히 다른 기능에 대한 책임이 있었지만 결국에는 웹 프론트 엔드 기술에 속하며 서로 밀접하게 협력해야합니다. 우리의 웹 페이지에는 .js 및 .css 파일이 있지만 CSS와 JS가 독립적이며 상호 작용할 수 없다는 의미는 아닙니다. 아래에 대해 이야기하고 싶은 JavaScript 및 CSS와 함께 일하는이 다섯 가지 방법을 알지 못할 수도 있습니다!
JavaScript를 사용하여 의사 요소 속성을 얻으십시오
모든 사람은 요소의 스타일 속성을 통해 CSS 스타일 값을 얻는 방법을 알고 있지만 의사 요소의 속성 값을 얻을 수 있습니까? 예, JavaScript를 사용하여 페이지에서 의사 요소에 액세스 할 수도 있습니다.
코드 사본은 다음과 같습니다.
<span style = "font-size : 18px;"> //. Element의 색상 값을 가져옵니다
var color = window.getComputedStyle (
document.querySelector ( '. element'), ': 이전'
) .getPropertyValue ( '색상');
//. Element의 컨텐츠 값을 가져옵니다
var content = window.getComputedStyle (
document.querySelector ( '. element'), ': 이전'
) .getPropertyValue ( 'content'); </span>
보셨습니까? 의사 요소에서 내용 속성 값에 액세스 할 수 있습니다. 역동적이고 세련된 웹 사이트를 만들려면 매우 유용한 기술입니다!
클래스리스트 API
많은 JavaScript 도구 라이브러리에는 AddClass, RemoveClass 및 ToggleClass가 있습니다. 이전 브라우저와 호환 되려면이 클래스 라이브러리는 메소드를 사용하여 요소의 클래스 이름을 검색 하고이 클래스를 추가하고 삭제 한 다음 클래스 이름을 업데이트합니다. 실제로 Classlist라는 CSS 클래스 속성을 추가, 삭제 및 반전시키는 메소드를 제공하는 새로운 API가 있습니다.
코드 사본은 다음과 같습니다.
<span style = "font-size : 18px;"> mydiv.classlist.add ( 'mycssclass');
mydiv.classlist.remove ( 'mycssclass');
mydiv.classlist.toggle ( 'mycssclass');
대부분의 브라우저는 Classlist API를 매우 일찍 구현하고 마지막으로 IE10도 구현했습니다.
스타일 시트에 스타일 규칙을 직접 추가하고 삭제하십시오
우리는 모두 element.style.propertyname을 사용하여 스타일을 사용 하여이 작업을 수행하는 데 도움이되지만 기존 CSS 스타일 규칙을 추가하거나 수정하는 방법을 알고 있습니까? 실제로 매우 간단합니다.
코드 사본은 다음과 같습니다.
<span style = "font-size : 18px;"> 함수 addcssrule (시트, 선택기, 규칙, 색인) {
if (sheet.insertrule) {
sheet.insertrule (selector + "{" + rules + "}", index);
}
또 다른 {
Sheet.Addrule (선택기, 규칙, 색인);
}
}
// 사용하십시오!
addcssrule (document.stylesheets [0], "헤더", "float : left");
</span>
이 방법은 일반적으로 새로운 스타일 규칙을 만드는 데 사용되지만 기존 규칙을 수정하려면이 작업을 수행 할 수 있습니다.
CSS 파일로드
사진, JSON, 스크립트 등의 게으른로드는 페이지 디스플레이 속도를 높이는 좋은 방법입니다. Curl.js 및 기타 JavaScript 로더를 사용하여 이러한 외부 리소스로드를 지연시킬 수 있지만 CSS 스타일 시트도로드를 지연시킬 수 있으며로드가 성공한 후에는 콜백 기능이 알 수 있습니다.
코드 사본은 다음과 같습니다.
<span style = "font-size : 18px;"> curl (
[의 뜻
"네임 스페이스/mywidget",
"CSS! 네임 스페이스/리소스/MyWidget.css"
],,
기능 (mywidget) {
// myWidget에서 작동 할 수 있습니다
//이 CSS 파일은 필요하지 않기 때문에 여기에 언급이 없습니다.
// 페이지에로드해야합니다.
}
}); </span>
모든 리소스가로드되면 콜백 기능이 트리거되고 콜백 기능에로드 할 수 있습니다. 매우 유용합니다!
CSS 마우스 포인터 이벤트
CSS 마우스 포인터 이벤트는이 속성이 없음과 매우 유사합니다 ,이 요소의 JavaScript 이벤트 또는 콜백 함수에서 금지됩니다!
코드 사본은 다음과 같습니다.
<span style = "font-size : 18px;"
이 요소를 클릭하면이 요소에 배치 한 리스너가 이벤트가 트리거되지 않습니다. 마법의 특징은 실제로 - 이벤트가 트리거되는 것을 방지하기 위해 특정 CSS 클래스가 존재하는지 확인할 필요가 없습니다.
이것은 아직 발견하지 못한 CSS 및 JavaScript와 상호 작용하는 5 가지 방법입니다. 새로운 발견이 있습니까? 그것을 공유하십시오!