이 글의 예시에서는 새로고침 없이 콘텐츠를 표시할 수 있는 JS CSS 시뮬레이션 게시판 기능을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. JS CSS는 새로 고침 없이 콘텐츠를 표시할 수 있는 메시지 보드 기능을 시뮬레이션합니다 <br> * { 패딩: 0; 여백: 0 }<br> li { 목록 스타일: 없음 }<br> #부모 { 너비: 600px; 여백: 0 자동; h4 { 줄 높이: 40px; 여백 하단: 10px; 테두리 하단: 1px 색상:#FF3300 }<br> p { 너비: 100%; 배경: #f1f1f1; 위치: 여백-하단: }<br> #box { 너비: 580px; 패딩: 25px 10px 0; 테두리: 1px #ddd; 마진-하단: 10px; 범위 { 위치: 절대; 상단: -20px }<br> em { 위치: 상대; 상단: -13px }<br> #text { 너비: 100%; 높이: 90px; 자동; #btn { 너비: 20%; 높이: 50px }<br> </스타일><br> <script type="text/javascript"><br> 나=1;<br> 함수 fnsubmit()<br> {<br> var odiv=document.getElementById("box");<br> var oem=odiv.getElementsByTagName("em")[0];<br> var otext=document.getElementById("text");<br> var oli=odiv.getElementsByTagName("li");<br> var add_li=document.createElement("li");<br> var o_span=document.createElement("span");<br> if(otext.value=="")<br> {<br> Alert("메시지 내용을 입력해주세요!");<br> 반품;<br> }<br> oem.style.display="없음";<br> o_span.style.position="절대";<br> o_span.style.top="-20px";<br> o_span.style.right="20px";<br> o_span.style.Background="#cccccc";<br> add_li.style.position="relative";<br> add_li.index=i;<br> add_li.style.Background="#cccccc";<br> add_li.style.marginBottom="20px";<br> var str=document.createTextNode(i "," otext.value);<br> var strspan=document.createTextNode("" i ", " otext.value " 콘텐츠를 삭제하시겠습니까?");<br> add_li.appendChild(o_span);<br> o_span.style.display="없음";<br> o_span.appendChild(strspan);<br> add_li.appendChild(str);<br> odiv.appendChild(add_li);<br> 나 ;<br> for(j=0;j<oli.length;j )<br /> {<br /> var m=j;<br /> oli[j].onmouseover=function()<br /> {<br /> this.style.Background="#ffff00";<br /> (this.childNodes(o_span)).style.display="block";<br /> <br />};<br /> oli[j].onmouseout=function()</p> {<p> this.style.Background="#cccccc";<br /> (this.childNodes(o_span)).style.display="none";<br /> };<br /> oli[j].onclick=function()<br /> {<br /> 음--;<br /> odiv.removeChild(this) <br /> if(m<0)<br /> {<br /> oem.style.display="block";<br /> };<br /> };<br /> };<br /> }<br /> </script><br /> </머리><br> <br> <div id="parent"><br> <h4>메시지 내용: </h4><br> <div id="box"><em>메시지 내용이 여기에 표시됩니다...</em></div><br> <input type="text" id="text"><br /><br> <input id="btn" type="button" onclick="fnsubmit()" value="메시지 게시" /><br> </div><br> <br /><br> </본문><br> </div>
