js_javascript 기술에서 그림을 동적으로 전환하는 방법

이 기사의 예에서는 js에서 그림을 동적으로 전환하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

index.css 파일은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

* {
여백: 0px; 패딩: 0px
}

본문 {
너비: 632px
/*배경색: 파란색;*/
여백: 0 자동
}

#imgsCom {
배경색: 노란색
/*상대 위치 지정, 하위 레이어에 절대 위치 지정을 사용하려면 이 div의 원점을 원점으로 사용합니다*/
위치: 친척
}

#ulnav{
목록 스타일 유형: 없음
     
위치: 절대
/*imgsCom을 원점으로 사용하여 오른쪽 하단 모서리의 절대 위치를 지정합니다*/
하단: 0px; 오른쪽: 0px; }
#ulnav 리{
목록 스타일 유형: 없음
플로트: 왼쪽
배경색: 검정색
색상: 흰색
​ 오른쪽 여백: 5px;
너비: 20픽셀
높이: 20px
줄 높이: 20px
텍스트 정렬: 가운데
커서: 포인터
}

index.html은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

 
 
<머리> 
     
    <제목>js,css动态切换图文 
     
    <스크립트 유형="텍스트/자바스크립트"> 
 
        함수 젤(id) { 
            return document.getElementById(id); 
        } 
 
        함수 clearLiBg() { 
            var mylis = gel("ulnav").childNodes; 
            for (var i = 0; i < mylis.length; i ) { 
                if (mylis[i].nodeType == 1) { 
                    mylis[i].style.BackgroundColor = "검은색"; 
                } 
            } 
        } 
       
        window.onload = function() { 
            //给三个liTU指정일个属性
            var lis = gel("ulnav").childNodes; 
            for (var i = 0; i < lis.length; i ) { 
                if (lis[i].nodeType == 1) { 
                    lis[i].onclick = 함수 () { 
                        //更换图그림 
                        gel("myimg").setAttribute("src", "images/" this.innerHTML ".png"); 
                        //所有LI颜color复原 
                        클리어LiBg(); 
                        //更换LI背景标签颜color
                        this.style.BackgroundColor = "실버"; 
                    }; 
                } 
            } 
        }; 
     
 
<본문> 
   

 
         
       

 
           
• 1
 
           
• 2
 
           
• 3