브라우저가 계속 업그레이드되고 개선됨에 따라 CSS와 JavaScript 사이의 경계가 점점 흐려지고 있습니다. 원래 그들은 완전히 다른 기능을 담당했지만 결국에는 모두 웹 프런트엔드 기술에 속하며 서로 긴밀하게 협력해야 합니다. 우리 모두는 웹 페이지에 .js 파일과 .css 파일을 가지고 있지만 이것이 CSS와 js가 독립적이고 상호 작용할 수 없다는 의미는 아닙니다. 여러분은 JavaScript와 CSS가 함께 작동할 수 있는 다섯 가지 방법을 알지 못할 수도 있습니다!
관련 학습 권장사항: 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
属性值。如果你想创建一个动态的,风格别致的网站,这是一种非常有用的技术!
很多的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
大多数的浏览器里很早就实现了classList
API,而且最终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");
这种方法通常是用来创建一个新的样式规则,但如果你想修改一个现有的规则,也可以这样做。
延迟加载图片、JSON、脚本等是用来加快页面显示速度的好方法。我们可以使用curl.js等这样JavaScript加载器来延迟加载这些外部资源,可你知道CSS样式表也可以延迟加载吗,而且在加载成功后回调函数会给予通知。
curl( [ "namespace/MyWidget", "css!namespace/resources/MyWidget.css" ], function(MyWidget) { // 你可以对MyWidget进行操作 // 这里没有对这个CSS文件引用,因为不需要; // 我们只需要它已经加载到页面上了 } });
本网站使用的PrismJS语法高亮脚本就是延迟加载的。当所有的资源都加载后,回调函数就会触发,我可在回调函数里加载它。非常有用!
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!