JavaScript를 사용하여 의사 요소 속성을 얻으십시오
모든 사람은 요소의 스타일 속성을 통해 CSS 스타일 값을 얻는 방법을 알고 있지만 의사 요소의 속성 값을 얻을 수 있습니까? 예, JavaScript를 사용하여 페이지에서 의사 요소에 액세스 할 수도 있습니다.
코드 사본은 다음과 같습니다.
//. Element의 색상 값을 가져옵니다
var color = window.getComputedStyle (
document.querySelector ( '. element'), ': 이전'
) .getPropertyValue ( '색상');
//. Element의 컨텐츠 값을 가져옵니다
var content = window.getComputedStyle (
document.querySelector ( '. element'), ': 이전'
) .getPropertyValue ( 'content');
당신은 그것을 보셨습니까? 의사 요소의 내용 속성 값에 액세스 할 수 있습니다. 역동적이고 세련된 웹 사이트를 만들려면 매우 유용한 기술입니다!
클래스리스트 API
많은 JavaScript 도구 라이브러리에는 AddClass, RemoveClass 및 ToggleClass가 있습니다. 이전 브라우저와 호환 되려면이 클래스 라이브러리는 메소드를 사용하여 요소의 클래스 이름을 검색 하고이 클래스를 추가하고 삭제 한 다음 클래스 이름을 업데이트합니다. 실제로 Classlist라는 CSS 클래스 속성을 추가, 삭제 및 반전시키는 메소드를 제공하는 새로운 API가 있습니다.
코드 사본은 다음과 같습니다.
mydiv.classlist.add ( 'mycssclass'); // 클래스를 추가합니다
mydiv.classlist.remove ( 'mycssclass'); // 클래스를 제거합니다
mydiv.classlist.toggle ( 'mycssclass'); // 클래스를 전환합니다
대부분의 브라우저는 Classlist API를 매우 일찍 구현하고 마지막으로 IE10도 구현했습니다.
스타일 시트에 스타일 규칙을 직접 추가하고 삭제하십시오
우리는 모두 Styles를 수정하기 위해 ement.style.propertyname을 사용하는 데 매우 익숙합니다. JavaScript를 사용하면이 작업을 수행하는 데 도움이 될 수 있지만 기존 CSS 스타일 규칙을 추가하거나 수정하는 방법을 알고 있습니까? 실제로 매우 간단합니다.
코드 사본은 다음과 같습니다.
함수 addcssrule (시트, 선택기, 규칙, 색인) {
if (sheet.insertrule) {
sheet.insertrule (selector + "{" + rules + "}", index);
}
또 다른 {
Sheet.Addrule (선택기, 규칙, 색인);
}
}
// 사용하십시오!
addcssrule (document.stylesheets [0], "헤더", "float : left");
이 방법은 일반적으로 새로운 스타일 규칙을 만드는 데 사용되지만 기존 규칙을 수정하려면이 작업을 수행 할 수 있습니다.
CSS 파일로드
사진, JSON, 스크립트 등의 게으른로드는 페이지 디스플레이 속도를 높이는 좋은 방법입니다. Curl.js 및 기타 JavaScript 로더를 사용하여 이러한 외부 리소스로드를 지연시킬 수 있습니다. 그러나 CSS 스타일 시트도로드가 지연 될 수 있으며로드가 성공한 후에 콜백 기능에 알림을받습니다.
코드 사본은 다음과 같습니다.
컬(
[의 뜻
"네임 스페이스/mywidget",
"CSS! 네임 스페이스/리소스/MyWidget.css"
],,
기능 (mywidget) {
// myWidget에서 작동 할 수 있습니다
//이 CSS 파일은 필요하지 않기 때문에 여기에 언급이 없습니다.
// 페이지에로드해야합니다.
}
});
이 웹 사이트에서 사용하는 Prismjs 구문 강조 스크립트는 게으른로드입니다. 모든 리소스가로드되면 콜백 기능이 트리거되고 콜백 기능에로드 할 수 있습니다. 매우 유용합니다!
CSS 마우스 포인터 이벤트
CSS 마우스 포인터 이벤트의 포인터 이벤트 속성은 매우 흥미 롭습니다. 그 효능은 JavaScript와 매우 유사합니다. 이 속성을 None으로 설정하면 요소가 효과적으로 비활성화되는 것을 방지 할 수 있습니다. "그래서 무엇?"라고 말할 수도 있지만 실제로이 요소의 JavaScript 이벤트 또는 콜백 함수를 금지합니다!
코드 사본은 다음과 같습니다.
.Disabled {포인터 이벤트 : 없음; }
이 요소를 클릭하면이 요소에 배치 한 리스너가 이벤트가 트리거되지 않습니다. 마법의 특징은 실제로 - 이벤트가 트리거되는 것을 방지하기 위해 특정 CSS 클래스가 존재하는지 확인할 필요가 없습니다.
위는 JavaScript 및 CSS와 상호 작용하는 5 가지 방법입니다. 더 나은 것이 있다면 말 해주세요. 이 기사는 지속적으로 업데이트됩니다.