>  기사  >  웹 프론트엔드  >  JavaScript 및 CSS와 상호작용하는 5가지 방법 알아보기

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

coldplay.xixi
coldplay.xixi앞으로
2020-07-07 16:20:372635검색

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工具库里都有addClassremoveClasstoggleClass等方法。为了对老式浏览器的兼容,这些类库采用的方法都是先搜索元素的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, removeClasstoggleClass와 같은 메서드가 있습니다. 이전 브라우저와 호환되기 위해 이러한 클래스 라이브러리에서 사용되는 방법은 먼저 요소의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 webhek.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제