/*
[자바스크립트로 CSS제어하기]
방법1]엘리먼트객체.style.CSS속성="CSS속성값";
단, CSS속성을 자바스크립트로 표현할때는
-(DASH)가 빠지고 두번째 글자의 첫글자가 대문자로 바뀜
단,-가 없는 CSS속성인 경우 그냥 소문자로 접근하면됨
방법2]엘리먼트객체.style["CSS속성"]="CSS속성값";
이때는 CSS속성 그대로 넣어준다
예]
font-size:10pt(CSS);
color:red(CSS);
background-image:url(이미지경로);
객체.style.fontSize="10pt";(자바스크립트)
객체.style["font-size"]="10pt";(자바스크립트)
객체.style.color='red';(자바스크립트)
객체.style["color"]='red';(자바스크립트)
객체.style.backgroundImage ="url('이미지경로')";
객체.style["background-image"] ="url('이미지경로')";
*/
<body>
<h2 style="color:red">자바스크립트로 CSS제어하기</h2>
<span id="span">SPAN태그</span>
<input type="button" value="글꼴바꾸기" />
<fieldset>
<legend>신문기사</legend>
<button>+</button>
<button>-</button>
<button>Red</button>
<button>Green</button>
<button>Blue</button>
<button>Black</button>
<button>볼드체</button>
<button>보통</button>
<p style="font-size:10px;" id="article">
박 대통령은 이날 청와대에서 열린 대통령 주재 수석비서관회의에<br />
참석해 이 같이 밝히며 “각 수석들은 국민을 대신해 일하고<br />
있는 분들인 만큼, 국민을 위해서 잘못된 그 어떤 것들에도<br />
결코 굴복하거나 용인하지 않겠다는 강한 의지를 가지고<br />
일해주길 바란다”고 당부했다.<br />
</p>
</fieldset>
</body>
▲인터넷 기사를 긁어와서 현재 body태그 안의 상태이다.
우리의 목표는 각 버튼을 누르면 버튼의 기능에 맞게 p태그에 구현하는 것이다.
window.addEventListener('load', function () {
var span = document.querySelector('#span');
var fieldset = document.querySelector('fieldset');
var p = document.querySelector('#article');
document.querySelector('[type=button]').onclick = function () {
//span.style.color='red';
//span.style.fontWeight='bold';
span.style['color'] = 'red';
span.style['font-weight'] = 'bold';
};
fieldset.onclick = function (e) {
console.log(e.target.nodeName);
console.log(e.target.textContent.trim());
if (e.target.nodeName != 'BUTTON') return;
console.log(parseInt(p.style.fontSize));
var currSize = parseInt(p.style.fontSize);
switch (e.target.textContent.trim()) {
case '+':
currSize += 5;
p.style.fontSize = currSize + 'px';
break;
case '-':
if (currSize > 10) {
currSize -= 5;
p.style.fontSize = currSize + 'px';
}
break;
case 'Red':
p.style.color = 'red';
break;
case 'Green':
p.style.color = '#00FF00';
break;
case 'Blue':
p.style.color = 'rgb(0,0,255)';
break;
case 'Black':
p.style.color = '#000000';
break;
case '볼드체':
p.style['font-weight'] = 'bold';
break;
default:
p['style']['font-weight'] = 'normal';
}
}
});
▲결과
'JavaScript > Javascript_Advanced' 카테고리의 다른 글
| [JS]Focus Event (0) | 2022.04.20 |
|---|---|
| [JS}Keyboard Event (0) | 2022.04.20 |
| [JS]DATE객체 ~ 17까지 포스팅 안함(못함) (0) | 2022.04.20 |
| [JS]Date 객체 (0) | 2022.04.19 |
| [JS]String 객체 (0) | 2022.04.19 |