앞서 해당 스타일에 대한 정보를 읽어오는 예시를 진행했다.
이번에는 해당 스타일에 대한 정보를 변경하는 스크립트를 작성해보자
해당스타일을 바꾸는 방법은
해당객체.css("변경할 속성", "변경할 수치");
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스타일 속성 읽기</title>
<style>
.menu {
width: 300px;
height: 200px;
border: 1px solid #ccc;
font-size: 14px;
}
.menu li {
width: 110px;
height: 30px;
}
li.select {
background-color: rgb(21, 255, 0);
}
</style>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function () {
var $content = $("ul.menu li");
var fontsize = 10;
console.log("font-size =", $content.css("font-size"));
var $menu_li = $("ul.menu li");
console.log("메뉴 항목의 width =", $menu_li.css("width"), ", height =", $menu_li.css("height"));
$("#run").click(function () {
$content.css("font-size", fontsize);
fontsize += 5;
});
$("#change").click(function(){
var $select = $("ul.menu li.select");
$select.css({width: 100, height: 100});
});
$content.click(function(){
var $item = $(this);
if($item.hasClass("select") == false){
$item.addClass("select");
} else{
$item.removeClass("select");
}
});
});
</script>
</head>
<body>
<input type="button" value="실행" id="run">
<input type="button" value="크기변경" id="change">
<ul class="menu">
<li>메뉴1</li>
<li class="select">메뉴2</li>
<li class="item">메뉴3</li>
<li>메뉴4</li>
</ul>
</body>
</html>
728x90
반응형
'HTML > jQuery 기초' 카테고리의 다른 글
| [jQuery] 노드 추가, 수정, 삭제, 이동 실습 (0) | 2020.08.04 |
|---|---|
| [jQuery] 노드 수정하기 (0) | 2020.08.04 |
| [jQuery] 노드 삭제하기 (0) | 2020.08.04 |
| [jQuery] 노드 움직이기 (0) | 2020.08.04 |
| [jQuery] 노드 추가하기 (0) | 2020.08.03 |
