HTML의 속성을 제어하는데 있어서 jquery는 .attr()통해서 제어하고, javascript에서는 setAttribute를 활용하여 제어하게 된다.
나는 이 속성을 활용해서 이미지 속성 변경을 많이 하곤 하지만, 글의 전달을 위해 input태그를 통해 예제를 보여줄까 한다.
- jquery와 javascript의 스타일 조건 동일
- button클릭 시 input의 placeholder(미리보기텍스트) 변경
1. jquery
jquery의 경우 필수적으로 사용해야 하는 플러그인이 있음에 따라 코드기록으로 대체한다.
* 버튼 클릭시 input.attr(변경할속성명:변경할속성값) = input.attr(placeholder:"미리보기가 변경되었습니다")
attr(속성명,속성값)
<!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>
.box{
width: 300px;
height: 300px;
}
input{
margin-top: 20px;
width: 200px;
height: 50px;
}
</style>
<script src="./js/jquery-3.7.1.js"></script>
<script src="./js/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$('.but').click(function(){
$('input').attr({
placeholder: "미리보기가 변경되었습니다"
})
})
})
</script>
</head>
<body>
<div class="box">
<button class="but">속성변경</button><br>
<input type="text" placeholder="미리보기">
</div>
</body>
</html>
2. javascript
getAttribute('속성명') :설정한 속성명의 값을 가져오게 됨
setAttribute('속성명','변경할속성값') : 선택한 속성명의 값을 변경할 속성값으로 변경
'javascript&jquery' 카테고리의 다른 글
| <javascript & jquery> 탭메뉴 생성 (0) | 2024.04.13 |
|---|
