JavaScript 작업 요소 인 스 턴 스 전체
사례:숨겨 진 암호 사례 보이 기
핵심 사고방식:(조작 폼 요소 속성)
<style>
.box{
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input{
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img{
position:absolute;
top: 2px;
right: 2px;
width: 24px;
}
</style>
<body>
<div class="box">
<label for="">
<img src="./image/close.png" alt="" id="eye">
</label>
<input type="password" name="" id="pwd">
</div>
<script>
var eye=document.getElementById('eye')
var pwd=document.getElementById('pwd')
var flag=0
eye.onclick=function(){
// 、
if(flag==0){
pwd.type='text'
eye.src='./image/open.png'
flag=1
}else{
pwd.type='password'
flag=0
}
}
</script>
</body>
핵심 사고방식:(조작 요소 스타일)
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style-type: none;
}
.box{
width: 250px;
margin: 100px auto;
}
.box li{
margin: 15px;
float: left;
width: 24px;
height: 24px;
background: url(./image/sprite.png) no-repeat;
}
</style>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// 1. li
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
// 44 li y
var y = i * 44;
lis[i].style.backgroundPosition = '0 -' + y + 'px';
}
</script>
</body>
사례:암호 상자 검증 정보
핵심 사고방식:(className 으로 스타일 속성 수정)
<style>
div {
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background: url(./image/mess.png) no-repeat left center;
padding-left: 20px;
}
.wrong {
color: red;
background-image: url(./image/wrong.png);
}
.right {
color: green;
background-image: url(./image/right.png);
}
</style>
<body>
<div class="register">
<input type="password" class="ipt">
<p class="message"> 6~16 </p>
</div>
<script>
var ipt = document.querySelector('.ipt')
var messgae = document.querySelector('.message')
ipt.onblur = function () {
if (this.value.length < 6 || this.value.length > 16) {
messgae.className = 'message wrong'
messgae.innerHTML = ' 6~16 '
} else {
messgae.className = 'message right'
messgae.innerHTML = ' '
}
}
</script>
</body>
사례:배경 색상 변경
핵심 사상:(조작 요소 스타일 속성)
4 개의 작은 그림 에 순환 등록 클릭 이 벤트 를 이용 하여 이 그림 을 클릭 하면 페이지 배경 을 현재 그림 의 핵심 알고리즘 으로 바 꿉 니 다.현재 그림 의 src 경 로 를 가 져 와 body 를 배경 으로 하면 됩 니 다.
<style>
*{
margin: 0;
padding: 0;
}
body{
background: url(./image/1.jpg) no-repeat center top;
}
li{
list-style-type: none;
}
.tu{
overflow: hidden;
margin: 100px auto;
background-color: #fff;
width: 410px;
padding-top: 3px;
}
.tu li{
float: left;
margin: 0 1px;
cursor: pointer;
}
.tu img{
width: 100px;
}
</style>
<body>
<ul class="tu">
<li><img src="./image/1.jpg"></li>
<li><img src="./image/2.jpg"></li>
<li><img src="./image/3.jpg"></li>
<li><img src="./image/4.jpg"></li>
</ul>
<script>
//
var imgs=document.querySelector('.tu').querySelectorAll('img');
//
for(var i=0;i<imgs.length;i++){
imgs[i].onclick=function(){
// this.src body
document.body.style.backgroundImage='url('+this.src+')';
}
}
</script>
</body>
핵심 사고방식:(배타 사상)
새로운 마우스 이벤트 마 우 스 를 사용 하여 onmouseover 마 우 스 를 통 해 onmouseout 의 핵심 방향 을 떠 납 니 다.마 우 스 는 tr 줄 을 거 쳐 현재 줄 은 배경 색 으로 변 합 니 다.마 우 스 는 현재 배경 색 을 제거 합 니 다.주의:첫 번 째 줄(thead 안의 줄)은 색 을 바 꿀 필요 가 없 기 때문에 tbody 의 줄 을 가 져 옵 니 다.
<style>
table{
width:800px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
font-size: 14px;
}
thead tr{
height: 30px;
background-color: skyblue;
}
tbody tr{
height: 30px;
}
tbody td{
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
}
.bg{
background-color: pink;
}
</style>
<body>
<table>
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>003526</td>
<td> 3 </td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td> 3 </td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td> 3 </td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td> 3 </td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td> 3 </td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td> 3 </td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
<script>
//
var trs=document.querySelector('tbody').querySelectorAll('tr')
//
for(var i=0;i<trs.length;i++){
trs[i].onmouseover=function(){
this.className='bg'
}
trs[i].onmouseout=function(){
this.className=''
}
}
</script>
</body>
핵심 사상:
<style>
*{
padding: 0;
margin: 0;
}
.wrap{
width: 300px;
margin: 100px auto 0;
}
table{
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,td{
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th{
background-color: #09c;
font: bold 16px ' ';
color: #fff;
}
td{
font: 14px ' ';
}
tbody tr{
background-color: #f0f0f0;
}
tbody tr:hover{
cursor: pointer;
background-color: #fafafa;
}
</style>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="cbAll" />
</th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
//
var cbAll = document.getElementById('cbAll'); //
var tbs = document.getElementById('tb').getElementsByTagName('input'); //
//
//
cbAll.onclick = function () {
for (var i = 0; i < tbs.length; i++) {
tbs[i].checked = this.checked;
}
}
//
for (var i = 0; i < tbs.length; i++) {
tbs[i].onclick = function () {
var flag = true //
//
for (var i = 0; i < tbs.length; i++) {
if (tbs[i].checked == false) {
flag = false
break
}
}
cbAll.checked = flag
}
}
</script>
</body>
핵심 사상:(배타 사상)
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style-type: none;
}
.tab{
width:978px;
margin: 100px auto;
}
.tab_list{
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li{
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current{
background-color: #c81623;
color: #fff;
}
.item{
display: none;
}
.item_info{
padding: 20px 0 0 20px;
}
</style>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current"> </li>
<li> </li>
<li> </li>
<li> （50000）</li>
<li> </li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
（50000）
</div>
<div class="item">
</div>
</div>
</div>
<script>
//
var lis = document.querySelector('.tab_list').querySelectorAll('li');
var items = document.querySelectorAll('.item');
//
for (var i = 0; i < lis.length; i++) {
// li
lis[i].setAttribute('index', i);
lis[i].onclick = function () {
//
// li current
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// current
this.className = 'current';
//
var index = this.getAttribute('index');
// item
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
// item
items[index].style.display = 'block';
}
}
</script>
</body>
총결산
자 바스 크 립 트 작업 요소 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 js 작업 요소 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
