jQuery 스타일 속성 값 얻기만약 body가 위와 같이 구성되어 있는 경우 table 스타일의 border 값을 얻기 위해서는 jQuery의 css() 메서드를 사용합니다.*RGB는 순서대로 Red, Green, Blue 를 의미하며 0 ~ 255 까지 값으로 표현합니다.jQuery 스타일 속성 추가 및 수정하기만약 span 요소에 font-size 값을 30px로 추가하고 싶으면 css(속성명, 속성값)을 이용할 수 있습니다. 만약 기존에 font-size 속성값이 존재한다면 새로 지정한 값으로 수정됩니다.font-size 스타일이 적용된 모습입니다.jQuery 스타일 속성 여러개 동시에 다루기만약 css() 메서드를 통해 동시에 여러개의 스타일 속성을 변경하고 싶은 경우에는 css(객체) 형태로 ..
JavaScript
2018. 6. 8. 18:09
[자바스크립트] CSS 선택자를 이용한 DOM 탐색하기 - 고급편
이전글[자바스크립트] CSS 선택자를 이용한 DOM 탐색하기 - 기본편자바스크립트 CSS 선택자를 이용한 DOM 탐색HTML5 이전의 자바스크립트 DOM API는 DOM 객체를 탐색하는데 매우 불편함이 존재했습니다. 기껏해야 태그명, id, name 속성을 이용하는 정도였습니다. 그러나 HTML5부터는 jQuery같은 라이브러리를 사용하지 않고도 CSS 선택자와 필터를 이용한 강력한 DOM 탐색이 가능하게 되었습니다. 이번 글에서는 자바스크립트 자체 메서드로 CSS 셀렉터를 이용한 DOM 탐색 방법을 알아보겠습니다.간단하게 id, class, 태그명 등을 이용한 탐색 방법은 이전글을 참조해주시기 바랍니다.자바스크립트에서 제공하는 DOM SELECT API이전글에서 설명했지만 간단하게 DOM 요소를 탐색하..
JavaScript
2018. 6. 8. 10:34
[자바스크립트] DOM 객체 스타일(style) 변경하기
이전글[자바스크립트] DOM 객체 innerHTML 속성DOM 객체 스타일(style) 변경하기DOM API를 이용하여 요소의 스타일을 변경할 수 있습니다. h1의 스타일을 변경해보겠습니다. DomDOM 객체의 속성에는 style이라는 속성이 존재하는데 이 속성은 요소의 style 정보들을 담고 있는 객체입니다.h1 태그의 텍스트 색상과 배경색을 변경해 보았습니다.style 객체의 속성으로는 우리가 평소에 사용하는 CSS 속성값들을 사용할 수 있는데 주의할 점은 자바스크립트의 식별자로는 -를 사용할 수 없기 때문에 CSS 속성명에서 -를 지우고 첫 글자를 대문자로 변경해야 한다는 점입니다.background-color → style.backgroundColor또한 자바스크립트 문법에 맞게 다음과 같..
