728x90
π jQuery μ€νμΌ λ©μλμ λν΄ μμλ΄ μλ€ !
π css() λ©μλ
| μ€ν λΆλ₯ | νμ |
|---|---|
| μ·¨λ | $("div").css("width"); |
| μμ±, λ³κ²½ | $("div").css("background-color", "red").css("padding", "10px"); |
| $("div").css({background-color: "red", padding: "10px"}); | |
| μ½λ°± ν¨μ | $("div").css("width", function(index, .w) { // indexλ κ° div μμμ index 0,1,2 // wλ κ° div μμ width μμ± return css μμ± // κ° div μμμ μμ±μ λ³κ²½ }); ... <div>λ΄μ©</div> <div>λ΄μ©</div> <div>λ΄μ©</div> |
π’ μ§μ μ μ©νλ©΄μ μ΄ν΄νμ !
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>css() λ©μλ<title>
<style>
* {
margin: 0;
padding: 0;
}
div:nth-child(1) {
background: red;
}
div:nth-child(2) {
background: green;
}
div:nth-child(3) {
background: blue;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
$("div").eq(0).css({padding: 10px, "text-align": "center"});
$("div").css("width", function(index) {
return index * 100 + 100; // 100,200,300
});
});
</script>
</head>
<body>
<div>λ΄μ©1</div>
<div>λ΄μ©2</div>
<div>λ΄μ©3</div>
</body>
</html>
π width, height κ΄λ ¨ λ©μλ
| λ©μλ μ’ λ₯ | μ€λͺ |
|---|---|
| width() | μμμ κ°λ‘ κΈΈμ΄λ₯Ό μ·¨λ, λ³κ²½ κ°λ₯ |
| innerWidth() | paddingμ΄ μ μ©λ μμμ κ°λ‘ κΈΈμ΄λ₯Ό μ·¨λ, λ³κ²½ κ°λ₯ |
| outerWidth() |
borderμ marginμ΄ μ μ©λ μμμ κ°λ‘ κΈΈμ΄λ₯Ό μ·¨λ, λ³κ²½ κ°λ₯ βοΈ outerWidth(); μμμ widthκ° + μ’/μ° border κ° βοΈ outerWidth(true); μμμ widthκ° + μ’/μ° borderκ° + μ’/μ° marginκ° |
| height() | μμμ λμ΄λ₯Ό μ·¨λ, λ³κ²½ κ°λ₯ |
| innerHeight() | paddingμ΄ μ μ©λ μμμ λμ΄λ₯Ό μ·¨λ, λ³κ²½ κ°λ₯ |
| outerHeight() |
borderμ marginμ΄ μ μ©λ μμμ λμ΄λ₯Ό μ·¨λ, λ³κ²½ κ°λ₯ βοΈ outerHeight(); μμμ heightκ° + μ/ν border κ° βοΈ outerHeight(true); μμμ heightκ° + μ/ν borderκ° + μ/ν marginκ° |
π’ μ§μ μ μ©νλ©΄μ μ΄ν΄νμ !
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>width, height λ©μλ<title>
<style>
* {
margin: 0;
padding: 0;
}
div {
padding: 20px;
margin: 20px;
background: #ff6600;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
$("div").width(150).height(150);
console.log("width 150" + $("div").width());
console.log("height " + $("div").height());
console.log("innerWidth " + $("div").innerWidth());
console.log("innerHeight " + $("div").innerHeight());
console.log("outerWidth " + $("div").outerWidth(true));
console.log("outerHeight " + $("div").outerHeight(true));
});
</script>
</head>
<body>
<div>λ΄μ©</div>
</body>
</html>
π μμΉ κ΄λ ¨ λ©μλ
| λ©μλ μ’ λ₯ | μ€λͺ | |
|---|---|---|
| offset() |
$("div").offset().left $("div").offset().top $("div").offset({left: 10, top: 10}) |
html κΈ°μ€μΌλ‘ left, top κ°μ μ·¨λ, λ³κ²½ κ°λ₯ |
| position() |
$("div").position().left $("div").position().top |
λΆλͺ¨ μμ κΈ°μ€μΌλ‘ left, top κ°μ μ·¨λ κ°λ₯ |
π’ μ§μ μ μ©νλ©΄μ μ΄ν΄νμ !
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>μμΉ κ΄λ ¨ λ©μλ λ©μλ<title>
<style>
* {
margin: 0;
padding: 0;
}
#outer {
width: 500px;
height: 500px;
margin: 50px;
position: relative;
background: #ff6600;
}
#inner {
width: 100px;
height: 100px;
position: absolute;
left: 80px;
top: 50px;
background: #ccc;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
console.log($("#inner").offset().left);
console.log($("#inner").offset().top);
console.log($("#inner").position().left);
console.log($("#inner").position().top);
});
</script>
</head>
<body>
<div id="outer">
<div id="inner">λ΄μ©</div>
</div>
</body>
</html>
'JAVASCRIPT > jQuery' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| jQuery | μμ± λ©μλ (2) | 2022.09.04 |
|---|---|
| jQuery | ν΄λμ€ λ©μλ (2) | 2022.09.04 |
| jQuery | νμ μ νμ (8) | 2022.08.31 |
| jQuery | νν° μ νμ (7) | 2022.08.31 |
| jQuery | μμ± μ νμ (9) | 2022.08.30 |
λκΈ