728x90
반응형
*목표 : 버튼을 누르면 해당하는 클래스를 추가
--클레스 제어 명령어
-className 속성 : 기존의 클래스까지 모두 덮어쓰기
=class라는 속성 대신 className으로 직접 class=""부분을 작성할수 있다.
=덮어씌우기 떄문에 돌아갈수 없다...
-classList 속성:
=모든 태그 객체는 classList라는 클래스 저장소를 가진다.
=명령이 다양해지며 기존 클래스와 충돌이 발생하지 않는다
=주로 사용하는 명령어가 될꺼같다.
function success(){
var h1 = document.querySelector(".title");
//h1.className = "success";//덮어쓰기
remove();
h1.classList.add("success");//추가
}
function danger(){
var h1 = document.querySelector(".title");
//h1.className = "danger";//덮어쓰기
remove();
h1.classList.add("danger");//추가
}
function remove(){
var h1 = document.querySelector(".title");
//h1.className = "";//전체 삭제
h1.classList.remove("success", "danger");//선택 삭제
}
</script>
</head>
<body>
<button onclick="success();">success</button>
<button onclick="danger();">danger</button>
<button onclick="remove();">remove</button>
<h1 class="title">Javascript Class Control</h1>
</body>
</html><style>
.form-input {
outline: none;
background-repeat: no-repeat;
background-size: contain;
background-position: right;
}
.form-input.success {
border-color: green;
background-image: url("./image/success.jpg");
}
.form-input.fail {
border-color: red;
background-image: url("./image/fail.jpg");
}
span.success {
color:green;
display: none;
}
span.fail {
color:red;
display: none;
}
.form-input.success ~ span.success {
display:block;
}
.form-input.fail ~ span.fail {
display: block;
}
</style>
<script>
function idCheck(){
var idInput = document.querySelector("input[name=memberId]");
var regex = /^[a-z][a-z0-9]{7,19}$/;
idInput.classList.remove("success", "fail");
if(regex.test(idInput.value)){//원하는 형식인 경우
idInput.classList.add("success");
}
else{//원하는 형식이 아닌 경우
idInput.classList.add("fail");
}
}
</script>
</head>
<body>
<form>
<div class="container-500 container-center">
<div class="row">
<label>아이디</label>
<input type="text" name="memberId" class="form-input" autocomplete="off" oninput="idCheck();">
<span class="success">멋진 아이디네요!</span>
<span class="fail">아이디는 8~20자 이내 영문 소문자 + 숫자로 작성하세요!</span>
</div>
</div>
</form>
</body>
</html>'[LANG] > - JavaScript' 카테고리의 다른 글
| [JS] javascript vs html vs CSS 누가먼저 실행될까 (0) | 2022.06.02 |
|---|---|
| [JS]내부글자제어 (0) | 2022.06.02 |
| [JS]CheckBox , 체크박스 (0) | 2022.06.02 |
| [JS]Default object (0) | 2022.06.02 |
| [JS]Default Event (0) | 2022.06.02 |
댓글