사례 1 : 모두를 선택하십시오
응용 지식 지점 : ondblClick = () | onclick | 태그 속성, 판단 및 기능 응용 프로그램을 찾으십시오
<! doctype%20html> <html>%20%20 <헤드>%20%20%20%20 <meta%20Charset = "UTF-8">%20%20%20%20 </title>%20 %20 </head>%20%20 <40%20%20%20%20 <디>%20%20%20%20%20%20%20 <입력%20Type = "버튼"%20value = "선택 모든 "%20ondblClick ="checkall () "%20/ >%20%20%20%20%20%20%20 <입력%20Type = "버튼"%20Value = "CANCEL"%20ONDBLCLICK = "CANCLEALL ()"%20/>%20%20%20%20% 20%20%20%20%20 <입력%20Type = "버튼"%20value = "미등록"%20ondblclick = "Reverseall ()"%20/>%20%20%20%20%20 20 %20 <Thead>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 %20%20%20%20 <tbody%20id = "tb">%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 0%20%20%20%20%20%20 </tr>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20 </tr>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20 </tr>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20 </tr>%20%20%20%20%20%20 </tbody>%20%20%20 </테이블>%20%20%20%20 <Script>%20%20%20%20%20%20 // 모두를 선택하면 모든 입력 태그 속성을 얻는다면 모두 실제%20%20%20%20%20%20 함수%20checkall () {%20%20%20%20%20%20%20%20var%20TB%20 =%20document.getElementby ID ( 'tb'); // tb를 얻습니다. 신체%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 (var%20i = 0; i <checks.length;%20i ++) {%20%2 0%20%20%20%20%20%20%사이 leall () {%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 // [첫, 2, 3, 4, 5] %20%20%20%20%20%20%20%20 20 %20 (var%20i = 0; i <체크 %20%20%20%20%20}%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20TB%20 =%20document.getElementById (// tb '); 신체%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Checks%20 =%20TB.GE TelementsByclassName ( 'C1');%20%20%20%20%20%20%20%20%20%20%20 // [첫 번째, 2, 3, 4, 5] 점검 된%20 =%20true%20%20%20%20%20%20%20%20checks [i]; // 변수 이름을 할당합니다. %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 </html> 사례 2 : 단일 선택
하나만 선택하고 JS를 사용하여 옵션을 변경할 수 있습니다.
응용 지식 지점 : getElementsByTagName%20 |%20 체크%20 |%20Mutex
<! docType%20html> <html>%20%20 <헤드>%20%20%20%20 <메타%20CHARSET = "UTF-8">%20%20%20%20 </title>%20%20 </head>%20 <Body>%20%20 %20%20 <ul>%20%20%20%20%20%20%20%20 <li> <입력%20Type = "Radio"%20name = "g"%20value = "11"%20/> 남성 </li>%20%20%20%20%20%20%20%20 <l I> <입력%20Type = "Radio"%20name = "g"g "%20value ="22 "%20/> 여성 </li>%20%20%20%20%20%20%20%20 <!-Radio%20 =%20document.getElementsByTagName ( '입력')%20%20%20%20%20 20 [<inp ut%20type = "radio"%20name = "g"%20value = "11">,%20 <입력%20Type = "Radio"%20name = "g"%20value = "11">,%20 <입력%20Type = "rad io "%20name ="g "%20value ="11 ">]%20%20%20%20%20Radio [1]%20%20%20%20%20%20 <입력%20Type ="Radio "%20name ="g "%20value ="11 "> %20%20%20%20xo%20 =%20Radio [1]%20%20%20%20%20 <입력%20Type = "Radio"%20name = "g"%20value = "11">%20%20%20%20%20%20%20xo .Value%20%20%20%20%20%20xo. 점검%20%20%20%20%20%20%20xo. 체크 값 20 =%20true%20%20%20%20true->%20%20 </html> </html> 사례 3 : 클로닝
<! docType%20html> <html>%20%20 <헤드>%20%20%20%20 <Meta%20Charset = "UTF-8">%20%20%20%20 <titl E> </title>%20%20 </head>%20%20 <body>%20%20%20%20 <H2%20ID = "H1"> 333%20%20%20%20%20 <span> 1 23 </span>%20%20%20%20%20%20%20%20 <span> 123 </%20%20%20%20%20%20%20%20%20%20 <123 </%20%20%20%20%20%20%20%20 <123 </span 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20%20%20 20%20%20%20%20 20%20%20%20%20 20 20 0%20%20%20 <a> 123 </a>%20%20%20%20 </h2>%20%20%20%20%20 <div%20id = "컨테이너">%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20% 20</div>%20%20%20%20%20<script>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 //c.appendChild(h);//It 2 //%20%20%20%20%20%20%20var%20Newh%20 =%20h.clonenode (true); // 진실, 클로닝 형식 만 //%20%20%20c. AppendChild (Newh); True를 추가 한 후, 그것은 완전히 복제되어 2%20%20%20%20 </script>%20%20 </body> </html>으로 복제됩니다 사례 4 : 사용자 정의 속성, 사용자 정의 속성 가져 오기 및 태그 내용 변경
<! docType%20html> <html>%20%20 <헤드>%20%20%20%20 <메타%20CHARSET = "UTF-8">%20%20%20%20 </title>%20%20 </head>%20%20 <Body>%20%20%20%20%20%20 // Selector concational worcuding worcuding worcomated %20%20%20%20%20 <입력%20Type = "버튼"%20onclick = "func ()"%20value = "클릭 Me "%20/%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20% 20 <div%20class = "C1"%20ALEX = 'SB'> 123 </div>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 <div%20C lass = "c1"> 123 </div>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 <div%20class = "C1"%20alex = 'SB'> 123 </div>%20 %20%20%20%20%20 <div%20class = "C1"> 123 </div>%20%20%20%20 </div>%20%20%20%20 <스크립트>%20%20%20%20 기능%20func () {%20%20%20%20%20 // i1 all allall 어린이, 루프 여부 Alex = 'SB'%20%20%20%20%20%20var%2 0i1%20 =%20document.getElementByid ( 'i1')%20%20%20%20%20%20%20%20%20%20%20%20%20 20 20%20 %20 (%20var%20i%20 = 0;%20i <divs.length; i ++) {%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20 CUR RENT_DIV%20 =%20divs [i];%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%20 (r esult%20 ==%20'SB ') {%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20}%20%20%20%20}%20%20%20%20 20}%20%20%20%20%20%20%20%> 사례 5 : 입력 상자에서 값을 얻는 세 가지 방법
<! docType%20html> <html> <head>%20%20 <title> </title>%20%20 <meta%20Charset = "utf-8"%20/> </head> <body>%20 <div%20id = "INP">%20%20%20%20 </div>%20 %20 <입력%20Type = "text"%20class = "aa"/>%20%20 <입력%20Type = "버튼"%20value = "add"%20onclick = "func ();"%20/>%20%20 </div>%20%20 <div%20id = "lis">%20%20%20%20 %20 <ul>%20%20%20%20%20%20%20 <li> 뇌 돼지 고기 </li>%20%20%20%20%20 <li> 브레이즈 엘보 0%20%20var%20inp_aa%20 =%20document.getElementsByClassName ( 'aa');%20%20%20%20inp_aa [0] .Value%20 =%20'braised hairfish '; // 입력 상자에 컨텐츠%20%20을 입력하는 것과 동등합니다. </html> </html> <! docType%20html> <Html> <Head>%20%20 <Title> </title>%20%20 <Meta%20Charset = "UTF-8"%20/> </head> <body>%20%20 <div%20id = "INP">%20%20%20 </div>%20 <입력%20Type = "텍스트"%"%20cla ss = "aa"/>%20%20 <입력%20Type = "버튼"%20value = "add"%20onclick = "func ();"%20/>%20%20 </div>%20%20 <div%20id = "lis">%20%20%20 <div%20id = "lis">%20 20 20 20 <lis "> %20%20 <ul>%20%20%20%20%20%20%20%20 <li> 찐 돼지 고기 </li>%20%20%20%20%20%20 <li> 찐 팔꿈치 </li>%20%20%20%20 </div>%20%20 <cript>% 20%20%20%20var%20c%20 =%20document.querySelector ( '. aa'); // 쿼리 선택기%20. 구별 ID, 태그의 구문 인 20%20%20c. 값%20 =%20'Braised 가지 ';%20%20%20%20 </script> </body> </html> 방법 2 : 쿼리
<! docType%20html> <html> <head>%20%20 <title> </title>%20%20 <meta%20Charset = "utf-8"%20/> </head> <body>%20%20 <div%20id = "inp">%20%20%20 </div >%20%20 <입력%20Type = "text"%20id = "aa"/>%20%20 <입력%20Type = "버튼"%20value = "add"%20onclick = "func ();"%20/>%20 </div>%20%20 <div%20id = "li S ">%20%20%20%20 <ul>%20%20%20%20%20%20%20 <li> 찐 돼지 고기 </li>%20%20%20%20%20 <li> Braised 엘보 가지 ';%20%20%20%20%20 </script> </body> </html> 방법 3 : ID
사례 6 :
%20 // 'preverbegin', 'afterbegin'/%20'beforeend '/'Afterend ' <! docType%20html> <Html>%20%20 <헤드>%20%20%20%20 <제목> </제목>%20%20%20 <메타%20CHARSET = "UTF-8"%20/>%20%20 </head>%20%20%20 <20%20%20%20 <di v%20id = "INP">%20%20%20%20 </div>%20%20%20%20 <입력%20Type = "텍스트"%20/>%20%20%20%20%20 <입력%20Type = "버튼"%20value = "Add"%20onclick = "addelen (this)" %20/>%20%20%20%20 </div>%20%20%20%20%20%20 <div>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 <li> 손잡이 </li>%20%20%20%20 20%20 <li> elbow < /li>%20%20%20%20%20%20%20%20%20%20 <li> 브레이즈 어류 </li>%20%20%20%20%20%20 </ul>%20%20%20%20 </div>%20%20%20%20%20%20%20 기능%20 addelen (ths)%20 {%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20aaa%20 =%20th ERT (AAA)%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Arert (LIS T_LI)%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20LIST_LI.INSERTADJACENTTML ( "beforend",%20BBB)%20%20%20%20%20%20%20}%20%20 </script>%20%20 </body> </html> <! docType%20html> <Html>%20%20 <헤드>%20%20%20%20 <title> </title>%20%20%20 <meta%20Charset = "UTF-8"%20/>%20%20 </head>%20%20%20 <Body%20%20 %20%20 <div%20id = "INP">%20%20%20%20 </div>%20%20%20%20%20 <입력%20Type = "text"%20/>%20%20%20%20%20 <입력%20Type = "Button"%20value = "추가"%20on 클릭 = "Addelen (this)"%20/>%20%20%20%20 </div>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 t>%20%20%20%20%20%20%20%20 기능%20addelen (Ths) {%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20dicument_li%20 =%20document.getElementbyid ( "Lis");%20 // get UL%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 태그 20 =%20도 문서 ( 'li'); // 생성 Li%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20LST_LI.INSTBEFORE (TAG,%20LIST_LI.CLODREN [-1]) // 인덱스 값을 삽입하십시오. %20%20%20%20}%20%20%20 </script>%20%20 </body> </html> <! doctype%20html> <html>%20%20 <Head>%20%20%20%20 <Meta%20CHARSET = "UTF-8">%20%20%20%20 </title>%20%20 </head>%20% 20 <body>%20%20%20%20 <div>%20%20%20%20%20%20%20%20 <입력%20Type = "텍스트"%20/>%20%20%20%20%20%20%20 <입력%20Type = " Ton "%20value ="추가 "%20onclick ="addelement (this) "%20/>%20%20%20%20 </div>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 </ul>%20%20%20%20 </div>%20%20%20%20%20%20 <스크립트>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20 20%20%20% Eggin ','afterbegin '/%20'beforeend'/'Afterend'%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 // 후 Begin%20% 근접 피팅%20%20%20%20%20%20%20%20 // after 엔드%20 외부 근접 피팅 //%20 %20%20%20%20%20%20%20%20%20 commentlist.insertadjacenthtml ( "beforend",%20St)%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20tag.innertext%20 =%20document.createElement ( 'li');%20%20%20%20%20%20%20tag.innertext%20 =% 20val;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 Tag.App EndChild (Temp);%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20}%20%20%20 </script>%20 20 </%20 20 </html> 사례 7 : 사례 7 : 사례 7 : : 사례 7 : : 사례 7 : : 사례 7 : : 사례 7 : : 사례 7 : : 사례 7 : : 사례 7 : : 사례 7 : : 사례 7 : 사례 7 : 사례 7 : 사례 7 : 사례 7 : 사례 7 : 사례 7 : 사례 7 : 사례 7 : 사례 7 : 사례 7 : 7 : 사례 7 : 사례 7 : 사례 7 : 사례 7 : 사례 7 : 사례 7 : 사례 7 : : 사례 7 : : 사례 7 : 사례 7 : 사례 7 : : 사례 7 : 사례 7 : 사례 7 : : 사례 7 : 사례 7 : 사례 7 : : 사례 7 : : 사례 7 : : 사례 7 : 사례 7 : : 사례 7 : : 사례 7 : 사례 7 : : 사례 7 : : 사례 7 : 사례 7 : 사례.
<! doctype%20html> <html>%20%20 <헤드>%20%20%20%20 <Meta%20Charset = "UTF-8">%20%20%20%20%20%2 0 -Height :%2040px;%2040px;%2040px;%2040px;%2040px;%2040px;%20%20%20%20%20 -Height :%2040px;%2 0%20%20%20%20%20}%20%20%20%20%20%20%.Gg {%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20 </style>%20%20 </head>%20%20 <body>%20%20%20%20%20%20%20 <p> 마우스가 들어 오면 컨텐츠 </p>%20%20%20%20 <p> 입력 테이블이 종료되면 </p>%20%20%20 <입력 20 <입력 20 <입력 테이블을 추가하십시오. 콘텐츠를 입력하십시오. . %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20if%20 (current_val%20 ==%20 "입력하십시오 콘텐츠 ") {%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20. %20%20 불능%20BLUR (THS)%20 {%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 FENT 20 (current_val%20 == 20 "%20 ||%20 20current_val.trim (). %20%20%20%20%20%20%20%20%20%20%20th. value%20 =%20 '내용을 입력한다';%20%20%20%20%20%20%20%20%20%20%20%20}%20%20%20%20%20%20}%20%20%20%20%</body> 사례 8 : 헤드 메뉴
<! doctype%20html> <html>%20%20 <헤드>%20%20%20%20 <title> </title>%20%20%20%20 <meta%20charset = "ut F-8 "%20/>%20%20%20%20%20%20%20%20.pg_top%20.menu%20 {%20%20%20%20%20%20%20 Background-Colo R :%20gold;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20 20%20 20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 폰트 크기 :% 2025px;%20%20%20%20%20}%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 0%20%20%20%20%20%20 백색 컬러 :%20burlywood;%20%20%20%20%20%20%20%20%20%20%20%20.Hide%20 {%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 {hide%20} 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 </style>%20%20%20%20%20 </head>%20%20 <40%20%20%20%20 <div%20class = "pg_top">%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20 <div%20class = "항목"%20con = "H2"%20onclick = "show (this)"> Guijie </div>%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 <d IV%20ID = "내용"%20class = "내용">%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20 <div 20%20 Conge "%20. 바 </div>%20%20%20%20%20%20 </div>%20%20%20%20 </div>%20%20%20%20%20 <스크립트>%20%20%20%20%20%20 기능%20 쇼우 (THS)%20 {%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 20 20 20 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 20% 0BABA%20 =%20ths.parentElement.Children;%20 // 각 어린이 요소%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20에 대해 20 (I%20 =%200;%20 <%20baba.length;%20i ++)%20 {%2 2 0%20%20%20%20%20%20%20%사이 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20% 20%20%20%20%20Baba [i] .classList.Remove ( 'BK')%20 // 제거 속성%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 // 내용%20%20%20%20%20%20%20%20%20%20%20%20var%20current_Con%20%20document ElementById ( 'Content'). 어린이;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20 %20 (j = 0;%20J <current_con.length; j ++)%20 {%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 var Rent_Con [J] .GetAttribute ( 'Con')%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20} else {%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20}%20%20%20%20%20%20 20}%20%20%20%20%</ht> < <! doctype%20html> <html>%20%20 <헤드>%20%20%20%20 <메타%20Charset = "UTF-8">%20%20%20%20%20 <title> </title>%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 0;%20%20%20%20}%20%20%20%20UL%20LI {%20%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20 색상 :%20 화이트;%20%20%20%20%20%20%20%20%20%20padding :%208px%2010px;%20%20%20%20%20}%20%20%20%20%20. {%2 0%20%20%20%20%20display :%20 블록;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20.HIDE {%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20.TITLE {%20%20%20%20%20%20%20%20%20%20 %20.TAB-MENU%20. TITLE {%20%20%20%20%20%20%20%20%20%20%20%20%20%20.Title%20.Active {%20%20%20%20%20%2 0%20%20 백색 컬러 :%20 화이트;%20%20%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20border :%201px%20Solid%20#dddddd;%20%20%20%20%20 분-height :%20150px;%20%20%20%20%20%20}%20 %20 </style>%20%20 </head>%20%20 <바디>%20%20%20%20 <div%20Style = "width : 400px;%20margin :%200%20AU TO; ">%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 >%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 0TARGET = 'H3'%20onclick = "show (this)"> Tianshahai </li>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 <div 20 con = "H1"> 구워 양고기 다리 </div>%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20 20% %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20 </div>%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 <스크립트>%20%20%20%20%20%20%20 기능%20 쇼우 (THS) {%20%20%20%20%20%20%20%20 // ths가 전류를 나타냅니다 태그%20%20%20%20%20%20%20%20var%20target%20 =%20ths.getAttribute ( 'target') // h3%20%20%20%20%20%20%20%20 // 스타일을 추가하십시오 활성%20%20%20%20%20%20%20%20%20%20%20ths.className%20 =%20'active ';%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20brothers%20 =%20ths. -Children;%20%20%20%20%20%20%20%20 20%20 for (var%20i = 0; i <br 기타. 길이; i ++) {%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 브라더 [ 'class')%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20console.log (공동 텐트)%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 var%20con%20 =%20current_content.getAttribute ( 'con')%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 20%20%</ht> 사례 9 : 상단으로 돌아갑니다
주요 지식 지점 : Onscroll%20 및 document.body.scrolltop;
<! doctype%20html> <html>%20%20 <헤드>%20%20%20%20 <메타%20Charset = "UTF-8">%20%20%20%20%20 <제목> </제목>%20%20%20%20%20%20%20%20.%20%20% 20%20%20%20 위치 :%20fixed;%20%20%20%20%20%20%20 비처 :%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 비처 :%20fixed; %20%20%20%20%20%20%20 위치 :%20fixed;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2 0%20%20%20%20%20 개의 직각 :%2020px;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 배경 콜로 :%20dar KGOLDENROD;%20%20%20%20%20%20%20%20%20 색 :%20 화이트;%20%20%20%20%20%20}%20%20%20%20%20%20%20%20 <b ODY%20onscroll = "func ();">%20%20%20%20%20 <div%20ID = "i1"%20Style = "높이 :%202000px;%20 Background-Color :%20g Reenyellow; ">%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 </div>%20%2 0%20%20 <div%20id = "i2"%20class = "go-top%20hide">%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% 20%20function%20func () {%20%20%20%20%20%20%20%20%20%20%20var%20Scrolltop%20 =%20document.body.scrolltop; // 신체 스크롤 높이%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20% %20if (scrolltop> 100) {%20%20%20%20%20%20%20%20%20%20%20%20ii.remove ( 'Hide'); // 디스플레이를 제거합니다 %20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20 %20}%20%20%20%20%20%20}%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20}%20%20%20 </script>%20%20 </body> </html> Case 10:
주요 지식 지점 :
// 스크롤%20 스크롤; 두루마리의 의미
//%20Scrolltop :%20 스크롤 바 높이에서 상단
//%20ScrollHeight :%20 문서 높이 : 자체 + 패딩
//%20ClientTop :%20 테두리 높이
//%20ClientHeight :%20 현재 범위 가시적 높이 : 자체%20+%20 패딩
//%20 인쇄 의미
//%20offsetTop :%20 "상단"에서 현재 레이블의 높이
//%20 이전 레벨에 게시물이없는 경우 위치 태그는 주로 위치 태그를 기반으로합니다.
//%20offsettheight :%20 자체 범위의 높이 : 자체 + 패딩 + 국경
<! docType html> <html> <head> <meta charset = "utf-8"> <title> </title> </head> <body> <div style = "높이 : 20px; 배경 색 : 녹색;"> </div> <!-head-> <divx solid 핑크; 패드 : 10px; "> <-> <div> <div> <div id ="> ">"> <divx solid 핑크; "> < 스타일 = "높이 : 200px; 오버플로 : 자동; 폭 > <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div> sdf </div> <div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div><div>sdf</div> <div>sdf</div> <div>sdf</div> </div> </div> </div> </div> </div> <script> var ii = document.getElementById('xo') console.log(ii.scrollTop) console.log(ii.scrollHeight) console.log(ii.clientTop) console.log(ii.clientHeight) console.log(ii.offsetTop) console.log(ii.offsetHeight) //scroll Scroll; scroll meaning // scrollTop: scrollbar height from the top // scrollHeight: Document height: itself + padding// clientTop: border height // clientHeight: visible range height: itself + padding //offset Print meaning // offsetTop: The current label distance from the "top" (body)// If there is no post on the previous level, if there is one, the position label is mainly used // offsetHeight: The visible range height: itself + padding+border </script> </body></html>好了，暂时就介绍到这里希望大家多写多练，主要是其中的逻辑，当然现在很多人都开始使用jquery了，大家也多注意。
