이전 토픽에서 원하는 태그를 select 함수로 선택했습니다. 선택한 태그에는 여러 값이 있습니다. 태그의 속성값, 적용된 CSS 속성값 등을 예로 들 수 있습니다. 이번 토픽에서 선택한 태그의 각종 값을 확인하고, 수정해보겠습니다.
1. 코드 작성
d3TagModify.html 혹은 다른 이름으로 HTML 파일을 하나 만들고 다음과 같이 코드를 작성합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
var img = d3.select('img')
console.log(img.attr('src'))
img.attr('src', 'https://raw.githubusercontent.com/d3/d3-logo/master/d3-black.png')
console.log(img.attr('src'))
var style = d3.select('.style')
console.log(style.style('color'))
style.style('color', 'red')
console.log(style.style('color'))
var text = d3.select('.text')
console.log(text.text())
text.text('바뀐 내용')
console.log(text.text())
var html = d3.select('.html')
console.log(html.html())
html.html('<h1>바뀐 내용</h1>')
console.log(html.html())
|
cs |
HTML 파일을 브라우저에서 열면 다음과 같습니다.
d3TagModify.js 혹은 다른 이름으로 자바스크립트 파일을 만듭니다. 다른 이름으로 하셨다면 HTML 코드 중 13번 줄, script 태그의 src 속성을 바꿔주면 됩니다. 다음과 같이 자바스크립트 코드를 작성합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var img = d3.select('img')
console.log(img.attr('src'))
img.attr('src', 'https://raw.githubusercontent.com/d3/d3-logo/master/d3-black.png')
console.log(img.attr('src'))
var style = d3.select('.style')
style.style('color', 'red')
var text = d3.select('.text')
text.text('바뀐 내용')
var html = d3.select('.html')
html.html('<h1>바뀐 내용</h1>')
|
cs |
자바스크립트 코드를 작성하고 난 뒤 HTML 파일을 다시 브라우저에서 열면 다음과 같은 화면으로 바뀝니다.
2. 속성값 수정
2-1. selection.attr(name[, value])
선택한 태그의 특정 속성값을 알고 싶거나 수정하고 싶을 때 attr 메소드를 사용합니다. 매개변수를 넣는 경우에 따라 attr 메소드가 하는 일이 달라집니다. name 매개변수는 필수로 넣어줘야 합니다.
- name에만 값을 넣었을 경우
선택한 태그의 속성 이름이 name인 속성(간단하게 name 속성이라고 하겠습니다)의 속성값을 반환합니다.
- 매개변수 name과 value 모두 값을 넣었을 경우
name 속성의 속성값을 value로 수정합니다. 만약 value 값이 null일 경우 name 속성을 제거합니다.
2-2. 예시
위에서 작성한 자바스크립트 코드 중 1~4번 줄이 attr 메소드를 사용한 코드입니다.
|
1
2
3
4
|
var img = d3.select('img');
console.log(img.attr('src'));
img.attr('src', 'https://raw.githubusercontent.com/d3/d3-logo/master/d3-black.png');
console.log(img.attr('src'));
|
cs |
브라우저의 개발자도구 콘솔창에는 다음과 같이 뜹니다.
2-3. 코드 설명
- 1번 줄은 select 함수로 태그를 선택하고 selection 객체를 img 변수에 대입합니다. 이렇게 변수에 selection 객체를 대입하면 나중에 다시 함수를 쓰지 않고 selection 객체를 사용할 수 있습니다.
- 2, 4번 줄은 선택한 태그의 src 속성값을 콘솔창에 출력합니다.
- 3번 줄은 선택한 태그의 src 속성값을 바꿉니다. 3번 줄에서 선택한 태그의 src 속성값을 바꿨기 때문에 2번 줄과 4번 줄의 콘솔창 출력 값이 다른 것을 볼 수 있습니다.
3. CSS 수정
3-1. selection.style(name[, value[, priority]])
선택한 태그의 CSS 속성값을 알고 싶거나 수정하고 싶을 때 style 메소드를 사용합니다. attr 태그와 사용법이 같습니다. 역시 name 매개변수는 필수로 넣어줘야 합니다.
- name에만 값을 넣었을 경우
선택한 태그의 name CSS 속성의 속성값을 반환합니다.
- name, value 에 값을 넣었을 경우
name CSS 속성의 속성값을 value로 지정합니다.
- name, value, priority 모두 값을 넣었을 경우
priority 매개변수는 CSS 우선순위를 지정하는 !important 옵션을 위한 매개변수로 null, important 두 경우가 있습니다. 매개변수로 문자열 important를 입력하면 해당 CSS 속성은 !important 옵션을 가집니다. 매개변수로 null을 입력하면 해당 CSS 속성의 !important 옵션을 제거합니다.
priority 매개변수에 문자열 'important' 대신 느낌표를 추가해서 '!important'를 입력하면 안 됩니다. 느낌표 없이 'important'만 입력해야 정상적으로 작동합니다.
3-2. 예시
위에서 작성한 자바스크립트 코드 중 6~9번 줄이 attr 메소드를 사용한 코드입니다.
|
6
7
8
9
|
var style = d3.select('.style')
console.log(style.style('color'))
style.style('color', 'red')
console.log(style.style('color'))
|
cs |
브라우저의 개발자도구 콘솔창에는 다음과 같이 뜹니다.
3-3. 코드 설명
- 7, 9번 줄은 선택한 태그의 CSS 속성 중 color 속성값을 콘솔창에 출력합니다.
- 8번 줄은 선택한 태그의 color CSS 속성값을 red로 바꿉니다. 속성값이 rgb 000(black)에서 red로 바뀐 것을 콘솔창과 브라우저 화면에서 확인할 수 있습니다.
