javascript4 #JavaScript, Element.classList -Web API #JavaScript, Element.classList -Web API #자바스크립트, classList 속성 ----- 설명 Description Element.classList 는 읽기 전용 속성이다. 요소의 클래스 속성의 값을 가져오는 DOM TokenList 를 반환한다. 클래스 리스트를 조작 할 수 있다. Element.ClassName을 대체하는 편리한 방법이다. Element.ClassName은 공백으로 구분되는 문자열로 클래스 목록에 접근하는 방식으로 공백제거와 정규표현식(Regular expression)을 사용해야 하는 번거로움이 있다. ----- 구문 Syntax var elementClasses = elementNodeReference.classList; var 변수명 = .. 2021. 3. 19. JavaScript, Array.prototype.forEach() JavaScript, Array.prototype.forEach() 자바스크립트, forEach 메소드 ----- 설명 Description forEach() 메서드는 콜백 함수를 배열 요소 각각에 대해 한번씩 오름차순으로 실행한다. 사실 이 것만 기억하면 사용하는데 문제는 없는 것 같다: 배열 요소, 한번씩, 오름차순, 콜백함수 forEach()로 처리할 배열 요소의 범위는 최초 콜백 함수(callback) 호출 전에 설정된다. 콜백함수 호출 이후 삭제되거나 추가된 요소에 대해서는 반영되지 않는다. 그러므로, 콜백 함수 실행 중에 배열 요소에 변동이 있는 로직에서는 사용이 적합하지 않은 것 같다. 초기화되지 않은 배열 요소에는 실행되지 않는다. 배열 요소가 정의되어 있지 않을 경우, 오류가 나진 않지만.. 2021. 3. 8. 아코디언 -기본 (Accordion -default type) 아코디언 See the Pen accordion_default by how2frontend (@how2frontend) on CodePen. default type Accordion: 가장 기본적인 기능만 구현(클릭시 해당 콘텐츠 토글) mark up : #accordion > .title + .content 아코디언 타이틀로 사용한 버튼 태그()는 어떤 태그로든 변경 가능 .title 클릭시 .active 클래스가 추가 되고, 다음 형제 요소의 CSS 속성이 변경된다.(display: none 또는 block;) section 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut lab.. 2021. 3. 5. classList console.log('polyfill classList'); if ("document" in self) { // Full polyfill for browsers with no classList support // Including IE < Edge missing SVGElement.classList if (!("classList" in document.createElement("_")) || document.createElementNS && !("classList" in document.createElementNS("http://www.w3.org/2000/svg", "g"))) { (function (view) { "use strict"; if (!('Element' in view)) return; .. 2021. 3. 3. 이전 1 다음