반응형
안녕하세요.
html요소에서 html css속성을 동적으로 변경하고 싶은 경우가 있습니다. 이번 포스팅에서는 JavaScript(자바스크립트)의 jQuery를 활용하여 html요소의 css속성값을 호출, css속성값 추가/변경에 대해서 알아보겠습니다.
목차
CSS 속성 호출
CSS 속성 추가/변경
CSS 한꺼번에 변경하기
CSS 속성 호출
html요소Id.css()를 사용하여 해당 요소의 css속성 값을 호출할 수 있습니다. 아래의 코드를 참고바랍니다.
$(html속성Id).css(propertyName);위의 css속성 호출방법을 사용한 예제입니다. 속성값을 가져온 후 alert창을 띄어 속성값을 보여줍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul id="menu1" style="color:red">
menu1
</ul>
<script>
var menuColor = $('#menu1').css('color');
alert(menuColor);
</script>
</body>
</html>화면
CSS 속성 추가/변경
html요소에 CSS속성을 추가/변경하는 방법입니다.
html요소Id.css('propertyName', '속성값');을 사용하여 변경할 수 있습니다.
$('html요소Id').css('propertyName', 'css속성값');위의 css 속성을 추가/변경방법을 사용한 예제입니다. style을 red로 지정했기 때문에 글자가 빨강색으로 보여야하지만, 추후에 검정색으로 변경했기 때문에 검정색으로 나타납니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul id="menu1" style="color:red">
menu1
</ul>
<script>
$('#menu1').css('color', 'black');
</script>
</body>
</html>화면
반응형
CSS 한꺼번에 변경하기
한꺼번에 css속성을 변경하는 방법입니다. 위의 CSS 속성 추가/변경과 방법이 똑같지만 html요소를 가져올 때 다르게 가져오면 됩니다. 바로 예제를 통해서 알아보겠습니다.
아래의 예제처럼 $(htrml요소 하위요소).css('propertyName', 'css속성값');을 사용하여 한꺼번에 css속성을 변경할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul id="menu1">
<li>menu1-1</li>
<li>menu1-2</li>
<li>menu1-3</li>
<li>menu1-4</li>
</ul>
<script>
$('#menu1 li').css('color', 'red');
</script>
</body>
</html>화면
jQuery를 사용하여 html요소의 css속성을 호출/추가/변경하는 방법에 대해서 알아봤습니다. 이상 포스팅을 마치겠습니다.
반응형
그리드형
'프로그래밍 > JavaScript' 카테고리의 다른 글
| [JavaScript] 랜덤난수 생성/예제+랜덤난수맞추기 게임(Math.Random) (2) | 2022.03.27 |
|---|---|
| [JavaScript] HTML요소 선택 - querySelector(), querySelectorAll() (0) | 2022.03.12 |
| [JavaScript] prompt(), confirm(), alert() 사용방법 (2) | 2022.03.11 |
| [JavaScript] SVG란? (1) | 2021.10.04 |
| XSS(Cross Site Scripting) Filter 크로스사이트스크립팅 방지처리 (0) | 2021.09.01 |