본문 바로가기
2019/JavaScript

JS add Event Listener (set Attribute)

by SOLYI 2019. 12. 9.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//스크립트
window.onload=function(){
    var d1=document.getElementsByTagName('a');
   //d1은 태그 'a'를 가리킴
    for(let i =0;i<d1.length;i++){ //d1의 길이만큼 아래내용을 실행
        console.log(d1); //테스트용 출력
 
        d1[i].addEventListener('focusin'function(){  //
            let imgt=this.children; 
                    //a태그의 자식. 즉 img를 의미
 
            let main=document.getElementById('main');
            //아이디가 main인 애들
            main.setAttribute('src', imgt[0].src);
            main.setAttribute('alt', imgt[0].alt);
            //img태그에 src alt 추가..
 
            imgt[0].style.border="1px solid red";
            imgt[0].style.opacity=1;
            //img에 스타일 ㅓㄱ용            
 
        });
        d1[i].addEventListener('blur',function(){
            this.children[0].style.border="0px";
            this.children[0].style.opacity=0.5;
        });
    }
}
 
 
//바디
 
   <div>
      <img src="../d1127/img/sunny3.jpg" alt="" id="main">
   </div>
   <div>
      <a href="#"><img src="../d1127/img/sunny.jpg" alt="써니1" class="a"></a>
      <a href="#"><img src="../d1127/img/sunny2.jpg" alt="써니1" class="a"></a>
      <a href="#"><img src="../d1127/img/sunny3.jpg" alt="써니1" class="a"></a>
   </div>
 
반응형

'2019 > JavaScript' 카테고리의 다른 글

JS addEventListener 연습  (0) 2019.12.09
JS create Element  (0) 2019.12.09
JS getElement  (0) 2019.12.09
JS Array  (0) 2019.12.06
JS Date  (0) 2019.12.06