JavaScript 및 CSS와 상호작용하는 5가지 방법 알아보기

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

관련 학습 권장사항: javascript 비디오 튜토리얼

JavaScript를 사용하여 의사 요소(의사 요소) 속성 얻기

모두가 스타일를 통해 요소의 CSS 스타일을 얻는 방법을 알고 있습니다. > 속성 값이지만 의사 요소의 속성 값을 얻을 수 있나요? 예, JavaScript를 사용하여 페이지의 의사 요소에 액세스할 수도 있습니다. style属性获取它的CSS样式值，但能获取伪元素(pseudo-element)的属性值吗？可以的，使用JavaScript也可以访问页面中的伪元素。

// Get the color value of .element:before
var color = window.getComputedStyle(
	document.querySelector('.element'), ':before'
).getPropertyValue('color');

// Get the content value of .element:before
var content = window.getComputedStyle(
	document.querySelector('.element'), ':before'
).getPropertyValue('content');

看见了吗，我能访问伪元素里的content属性值。如果你想创建一个动态的，风格别致的网站，这是一种非常有用的技术！

classList API

很多的JavaScript工具库里都有addClass，removeClass和toggleClass等方法。为了对老式浏览器的兼容，这些类库采用的方法都是先搜索元素的className，追加和删除这个类，然后更新className。其实有一个新型的API提供了添加，删除和反转CSS类属性的方法，叫做classList：

myp.classList.add('myCssClass'); // Adds a class

myp.classList.remove('myCssClass'); // Removes a class

myp.classList.toggle('myCssClass'); // Toggles a class

大多数的浏览器里很早就实现了classListAPI，而且最终IE10里也实现了它。

直接对样式表进行添加和删除样式规则

我们都非常熟悉使用element.style.propertyName来修改样式，使用JavaScript能帮助我们做到这些，但你知道如何新增或修一个现有的CSS样式规则吗？其实非常的简单。

function addCSSRule(sheet, selector, rules, index) {
	if(sheet.insertRule) {
		sheet.insertRule(selector + "{" + rules + "}", index);
	}
	else {
		sheet.addRule(selector, rules, index);
	}
}

// Use it!
addCSSRule(document.styleSheets[0], "header", "float: left");

这种方法通常是用来创建一个新的样式规则，但如果你想修改一个现有的规则，也可以这样做。

加载CSS文件

延迟加载图片、JSON、脚本等是用来加快页面显示速度的好方法。我们可以使用curl.js等这样JavaScript加载器来延迟加载这些外部资源，可你知道CSS样式表也可以延迟加载吗，而且在加载成功后回调函数会给予通知。

curl(
	[
		"namespace/MyWidget",
		"css!namespace/resources/MyWidget.css"
	], 
	function(MyWidget) {
		// 你可以对MyWidget进行操作
		// 这里没有对这个CSS文件引用，因为不需要;
		// 我们只需要它已经加载到页面上了
	}
});

本网站使用的PrismJS语法高亮脚本就是延迟加载的。当所有的资源都加载后，回调函数就会触发，我可在回调函数里加载它。非常有用！

CSS鼠标指针事件

CSS鼠标指针事件pointer-events属性非常的有趣，它的功效非常像JavaScript，当你把这个属性设置为none

.disabled { pointer-events: none; }

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

classList API

많은 JavaScript 도구 라이브러리에는 addClass, removeClass 및 toggleClass와 같은 메서드가 있습니다. 이전 브라우저와 호환되기 위해 이러한 클래스 라이브러리에서 사용되는 방법은 먼저 요소의 className을 검색하고 클래스를 추가 및 삭제한 다음 className을 업데이트하는 것입니다. 실제로 CSS 클래스 속성을 추가, 삭제 및 반전하는 메서드를 제공하는 classList라는 새로운 API가 있습니다. 🎜rrreee🎜대부분의 브라우저는 classList API를 아주 초기에 구현했으며 결국 IE10에도 구현되었습니다. 구현되었습니다. 🎜🎜스타일 시트에 직접 스타일 규칙 추가 및 삭제🎜🎜우리 모두는 element.style.propertyName을 사용하여 스타일을 수정하는 데 매우 익숙합니다. JavaScript를 사용하면 이 작업에 도움이 될 수 있지만 방법은 알고 있습니다. 새로운 것을 추가하거나 기존 CSS 스타일 규칙을 수정하시겠습니까? 실제로는 매우 간단합니다. 🎜rrreee🎜이 방법은 일반적으로 새 스타일 규칙을 만드는 데 사용되지만 기존 규칙을 수정하려는 경우에도 이 방법을 사용할 수 있습니다. 🎜🎜CSS 파일 로드🎜🎜이미지, JSON, 스크립트 등의 지연 로드는 페이지 표시 속도를 높이는 좋은 방법입니다. 이러한 외부 리소스를 지연 로드하기 위해 컬.js와 같은 JavaScript 로더를 사용할 수 있습니다. 그러나 CSS 스타일 시트도 지연 로드될 수 있으며 로드가 성공한 후에 콜백 함수가 이를 알려준다는 것을 알고 계셨습니까? 🎜rrreee🎜이 웹사이트에 사용된 PrismJS 구문 강조 스크립트는 지연 로드됩니다. 모든 리소스가 로드되면 콜백 함수가 실행되고 이를 콜백 함수에서 로드할 수 있습니다. 매우 유용합니다! 🎜🎜CSS 마우스 포인터 이벤트🎜🎜CSS 마우스 포인터 이벤트 pointer-events 속성은 이 속성을 none 으로 설정하면 매우 흥미롭습니다. 이 요소를 효과적으로 방지하고 비활성화할 수 있습니다. "그래서 뭐?"라고 말할 수도 있지만 실제로는 이 요소에 대한 모든 JavaScript 이벤트나 콜백 기능이 비활성화됩니다. 🎜rrreee🎜 이 요소를 클릭하면 이 요소에 배치한 리스너가 어떤 이벤트도 트리거하지 않는다는 것을 알 수 있습니다. 정말 환상적인 기능입니다. 이벤트가 트리거되는 것을 방지하기 위해 더 이상 특정 CSS 클래스가 존재하는지 확인할 필요가 없습니다. 🎜🎜아직 발견하지 못한 CSS 및 JavaScript와 상호 작용하는 5가지 방법입니다. 새로운 발견이 있나요? 공유하세요! 🎜

위 내용은 JavaScript 및 CSS와 상호작용하는 5가지 방법 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!