제이쿼리 문서 객체 조작 css()
카멜표기법 사용.
-매개값을 한개 주면 특정 값을 확인
-매개값을 두개 주면 특정 값 변경
-매개값을 객체 형식{키:값,키:값...}으로 주면 여러 값을 한번에 변경 가능
jquery03.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- jquery -->
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<h3>스타일제어</h3>
<ul class="test1">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<div class="box">box</div>
<script>
//js
// var li=document.querySelectorAll(".test1>li");
// for(var i=0;i<li.length;i++){
// li[i].style.backgroundColor="red";
// }
//css속성 변경
$(".test1>li").css("backgroundColor","red");
//css속성 확인
var color=$(".test1>li").css("backgroundColor");
console.log(color);
//css속성을 한번에 변경
$(".box").css({backgroundColor:"red",width:"200px",height:"200px",display:"inline-block"})
</script>
</body>
</html>
'JQuery' 카테고리의 다른 글
| 230217 JQuery 클래스제어 addClass(), removeClass(), toggleClass() (0) | 2023.02.17 |
|---|---|
| 230217 JQuery innerHTML제어 html() (0) | 2023.02.17 |
| 230217 JQuery 속성제어 attr() (0) | 2023.02.17 |
| 230217 JQuery value값 제어 val() (0) | 2023.02.17 |
| 230217 JQuery 기초 및 설치 (0) | 2023.02.17 |
