반응형
잡담
1. width, height
jQuery의 width() 및 height() 메서드는 선택한 요소의 너비와 높이를 가져오거나 설정하는 데 사용됩니다.
1. 너비 및 높이 가져오기:
var width = $('#myElement').width();
var height = $('#myElement').height();2. 너비 및 높이 설정하기:
$('#myElement').width(300); // 너비를 300px로 설정
$('#myElement').height(200); // 높이를 200px로 설정이 메서드들은 요소의 현재 너비와 높이를 가져오거나 설정하는 데 유용합니다. 요소의 크기를 동적으로 변경하고, 화면에 렌더링 되는 요소의 크기를 조정할 때 사용됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#wrap{
width:100px;
height:100px;
background-color: aqua;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function myFunc(){
var w=$("#wrap").width()//getter
alert(w)//100
$("#wrap").width('+=50').height('+=50');//setter
//$("#wrap").width(200);
//$("#wrap").width('200');
//$("#wrap").width('200px');
//$("#wrap").width('+=50');
}
</script>
</head>
<body>
<div id="wrap">
기본글자
</div>
<button onclick="myFunc()">클릭</button>
</body>
</html>
2. attr
jQuery의 attr() 메서드는 선택한 요소의 속성을 가져오거나 설정하는 데 사용됩니다.
1. 속성 가져오기:
var attributeValue = $('#myElement').attr('속성이름');
2. 속성 설정하기:
$('#myElement').attr('속성이름', '새로운값');예를 들어, 이미지 요소의 src 속성을 가져오거나 설정할 때 사용할 수 있습니다:
var src = $('img').attr('src'); // 이미지 요소의 src 속성 가져오기
$('img').attr('src', 'newimage.jpg'); // 이미지 요소의 src 속성 설정하기이 메서드를 사용하면 HTML 요소의 속성을 동적으로 조작할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input {
display: block;
}
#wrap {
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
function myFunc() {
var width = $('#width-input').val();
var height = $('#height-input').val();
var color = $('#color-input').val();
var text = $('#text-input').val();
$('#wrap')
.attr('style', 'width:' + width + 'px; height:' + height + 'px; background-color:' + color)
.text(text);
}
</script>
</head>
<body>
<input type="text" id="width-input" placeholder="가로길이(200입력)">
<input type="text" id="height-input" placeholder="세로길이(200입력)">
<input type="text" id="color-input" placeholder="색깔(red입력)">
<input type="text" id="text-input" placeholder="문구(아무거나입력)">
<div id="wrap">
기본글자
</div>
<button onclick="myFunc()">클릭</button>
</body>
</html>
반응형
'Java Script > jQuery' 카테고리의 다른 글
| [Java Script] jQuery/ radio, checkbox (0) | 2024.04.30 |
|---|---|
| [Java Script] jQuery / val, text, html (0) | 2024.04.30 |
| [Java Script] jQuery 사용법 (0) | 2024.04.26 |
| [Java Script] jQuery / even, odd, lt, gt, eq (1) | 2024.04.26 |
| [Java Script] jQuery / prev, prevAll, prevUntil, next, nextAll, nextUntil, siblings (0) | 2024.04.26 |