http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html, 여기에서 기사를 읽으러 다시 오시면 확실히 더 깊은 이해를 갖게 될 것입니다. 여기서는 몇 가지 개념적인 내용을 소개하기 때문에 초보자에게는 다소 어려울 수 있는 아래 예시를 살펴보세요!
document<br> <br> <br><h1 id="CSS-데모">CSS 데모</h1> <br><p>저는 미인을 좋아합니다. 특히 키가 큰 미인을 좋아합니다.<br></body> ; <br></html> <br><br><br>
</p>
</div>
<br>이 문서의 DOM 표현은 다음과 같습니다. <p><span style="FONT-SIZE: 14px; COLOR: #000000; FONT-FAMILY: tahoma,arial,helvetica,sans-serif">
</span></p>
<p>
<img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201204/20120407022003742.jpg" class="lazy" alt=""></p>사진은 HTML 문서의 트리를 나타냅니다.<p><span style="max-width:90%">
</span></p>모든 DOM 트리 구조는 다양한 유형의 Node 객체로 표현됩니다. firstChild, lastChild, nextSibling, PreviousSibling 및 ParentNode 속성은 노드 <p><span style="FONT-SIZE: 14px; FONT-FAMILY: tahoma,arial,helvetica,sans-serif">,appendChild 트리를 순회하는 방법을 제공합니다. ,removeChild, replacementChildh 및 insertBefore와 같은 메소드는 문서에 노드를 추가하거나 문서에서 노드를 삭제할 수 있습니다. </span>이해가 안 되셔도 괜찮습니다. 다음으로 이해를 돕기 위해 다양한 예를 들어보겠습니다. <span style="FONT-SIZE: 14px; FONT-FAMILY: tahoma,arial,helvetica,sans-serif"><span style="COLOR: #ff0000"></span>1. 먼저 CSS로 미화된 목록을 생성합니다</span></p>
<br><div class="codetitle">
<span>코드를 복사합니다<a style="CURSOR: pointer" data="96045" class="copybut" id="copybut96045" onclick="doCopy('code96045')"><u></u> 코드는 다음과 같습니다. : </a></span> </div><style type="text/css"> <div class="codebody" id="code96045">body{ margin:0px; padding:0px } <br>#container{font-family:tahoma;font- 크기:14px ;border:solid 1px #99ffcc; 너비:200px;height:140px; float:left; } <br>#container ul{list-style:none;padding:1px 0px 0px 0px;} <br># 컨테이너 ul li{ border-bottom:solid 1px #99ffcc; 여백:0px;height:27px;} <br>#container ul li a{배경-색상:회색;텍스트-장식:none;display:block; border-left :solid 10px red;margin:0px; padding:5px 0px 5px 10px;} <br>#container ul li a:hover{ background-color:red; color:#000000 } <br></style> ; <BR><BR> <BR>2. div 요소를 추가합니다. </div><BR><BR>코드를 복사합니다.<div class="codetitle"><span><a style="CURSOR: pointer" data="74019" class="copybut" id="copybut74019" onclick="doCopy('code74019')"> <U></U> </a><div id="container"> <ul id="list"> </div><li><a href="#">홈< ;/a></ li> <div class="codebody" id="code74019"><li id="myblog"><a href="#">내 블로그</a></li> <br><li> ;a href="#" >스포츠</a></li> <br><li><a href="#">뉴스</a></li> ;li><a href ="#">Contane</a></li> <br></ul> <br></div> <br><br> <br>3. 이제 다음 그림이 표시됩니다. <br>
<br><br>
</div>4. 위 그림에 따라 전체 요소 수를 가져옵니다<br><br><p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201204/20120407022003340.jpg" class="lazy" alt=""></p>코드를 복사합니다<br><div class="codetitle">
<span> 코드는 다음과 같습니다: <a style="CURSOR: pointer" data="13540" class="copybut" id="copybut13540" onclick="doCopy('code13540')"><u> </u>var Tools = {} </a>Tools.getElementCount = function(e){ </span>var count =0 </div>elementTotal(e); >document.table.txt.value = "element:" count; <div class="codebody" id="code13540">function elementTotal(e) <br>{ <br>if(e.nodeType == 1) count <br>var children = e.childNodes ; <br>for(var i = 0;i<children.length;i ) <BR>{ <BR>elementTotal(children[i]) <BR>} <BR>}; <BR> <BR>참고: 모두<button type ="button" onclick = "alert(Tools.getElementCount(document))">를 추가하여 요소 수를 얻을 수 있습니다</button> 텍스트는 모두 대문자<br><br><br><br><br>코드 복사<br>
</div>
<br> 코드는 다음과 같습니다.<br><br> <div class="codetitle">Tools.ModifyElement = 함수 수정(e){ <span>if(e .nodeType == 3) <a style="CURSOR: pointer" data="94977" class="copybut" id="copybut94977" onclick="doCopy('code94977')">e.data = e.data.toUpperCase() <u>else </u>{ </a>for(var i = e .firstChild;i!=null;i=i.nextSibling) </span>수정(i) </div>} <div class="codebody" id="code94977">
<br><br>참고: <button type ="button" onclick = "Tools.ModifyElement(document)">대문자</button> <br><br>효과: <br>
<p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201204/20120407022003464.jpg" class="lazy" alt=""> </p> 6. 목록 정렬 <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="77223" class="copybut" id="copybut77223" onclick="doCopy('code77223')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code77223"> <br>Tools.documentSort = function(e){ <br>var textArray = [] <br>if(typeof e == "string") e = document.getElementById(e) <br>for; (var x = e.firstChild; x!= null;x=x.nextSibling) <br>if(x.nodeType == 1) textArray.push(x) <br>textArray.sort(function(n,m) ){ <br>var s = n.firstChild.firstChild.data; <br>var t = m.firstChild.firstChild.data; <br>if(s>t) return <br>else if(s< ;t) return 1; else return 0; <BR>}) <BR><BR></div>참고: <button type ="button"을 추가할 수 있습니다 = "Tools.documentSort('list' )">정렬</버튼> <br><br>효과: <br>
<br><p><span style="COLOR: #99cc00; FONT-FAMILY: tahoma,arial,helvetica,sans-serif"><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201204/20120407022003368.jpg" class="lazy" alt=""></span>7. 목록 항목을 동적으로 삽입(하위 노드) </p>
<br><div class="codetitle"><span><a style="CURSOR: pointer" data="3927" class="copybut" id="copybut3927" onclick="doCopy('code3927')">코드 복사<u></u></a> 코드는 다음과 같습니다. </span></div> <div class="codebody" id="code3927">Tools.insertElement = function(n,e){ <br>if(typeof n == "string") n = document.getElementById(n); 🎜>var li = document.createElement(e); <br>var a = document.createElement("a") <br>a.setAttribute("href","#") <br>var txt = document .createTextNode("HotBlog"); <br>li.appendChild(a); <br>var parent = n.parentNode; <br>parent.insertBefore(li,n); <br> }; <br><br><br>참고: <버튼 유형 ="button" onclick="Tools.insertElement('myblog','li');">삽입</ 버튼>을 추가할 수 있습니다. ; <BR></div>효과: <BR>
<br><br><BR>8. 자바스크립트 클래스를 사용하여 동적으로 문서 생성<P>1. 스타일시트<img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201204/20120407022003425.jpg" class="lazy" alt=""></P><BR><BR><div class="codetitle">코드 복사<span><a style="max-width:90%" data="23817" class="copybut" id="copybut23817" onclick="doCopy('code23817')"><U> 코드는 다음과 같습니다. </U></a> </span>.tooltip{Background:url('2.jpg'); border:solid 1px #99ffcc; width:200px;height:200px;}//모두가 원합니다. 여기에서 사진을 클릭하세요. </div>.toolcontent{ background-color:#ffffff; border:solid 1px #99ff00; padding:5px; color:#000000;} <div class="codebody" id="code23817"><BR> <BR>2. javascript class<BR></div><BR><BR><div class="codetitle">코드 복사<span><a style="CURSOR: pointer" data="90704" class="copybut" id="copybut90704" onclick="doCopy('code90704')"><U> 코드는 다음과 같습니다.</U></a> </span>function Tooltip() </div> { <div class="codebody" id="code90704">this.tooltip = document.createElement("div"); <BR>this.tooltip.style.position = "absolute"; <BR>this.tooltip.className = "tooltip"; content = document.createElement( "div"); <BR>this.content.style.position = "relative"; <BR>this.content.className = "toolcontent" <BR>this.tooltip.appendChild(this. 콘텐츠); <BR> } <BR>Tooltip.prototype.show = function(text,x,y) <BR>{ <BR>this.content.innerHTML = 텍스트 <BR>this.tooltip.style.left = x "px"; <BR>this.tooltip.style.top = y "px"; <BR>this.tooltip.style.visibility = "표시" <BR>if(this.tooltip.parentNode != 문서. body) <BR>document .body.appendChild(this.tooltip); <BR>Tooltip.prototype.hide = function(){ this.tooltip.style.visibility ="hidden";}; >var t = new Tooltip (); <BR>function hide() <BR>{ <BR>t.hide() <BR>} <BR>function show() <BR>{ <BR>t.show ("hello ",300 ,0); <BR>} <BR>function init() <BR>{ <BR>document.operator.show.onclick = 표시 <BR>document.operator.hide.onclick = 숨기기 ; <BR>} <BR><BR> <BR>참고: 위를 사용하려면 다음 단계도 완료해야 합니다. 1. 본문에 onload=init();2를 추가합니다. <BR><form name = "연산자"> <br><입력 유형 = "버튼" 값 = "숨기기" 이름 = "숨기기"/><br><입력 유형 = "버튼" 값 = "표시" 이름 = "표시 "> <br> </form> </div>효과: (보이는 것을 숨깁니다.) <br>
<br><br><br><br>9. 동적으로 스타일 추가 및 삭제 <br><br>1. 스타일시트 <p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201204/20120407022003714.jpg" class="lazy" alt=""><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201204/20120407022003406.jpg" class="lazy" alt=""></p>
<br>코드 복사<br> 🎜><br> 코드는 다음과 같습니다. <div class="codetitle">
<div class="codebody" id="code90041"> <br>.container{font-family:tahoma;font-size:14px;border:solid 1px #99ffcc; 너비:200px;높이:140px;float:왼쪽;} <br>.container ul{list-style:none;padding:1px 0px 0px 0px; 여백:0px;} <br>.container ul li{ border-bottom:solid 1px #99ffcc; 여백:0px;높이:27px;} <br>.container ul li a{배경색:회색;텍스트 장식:없음;디스플레이:블록; 테두리 왼쪽:단색 10px 빨간색;여백:0px; 패딩:5px 0px 5px 10px;} <br>.container ul li a:hover{배경색상:빨간색; 색상:#ffffff; } <br>
</div> <br>2、工具函数（动态添加、删除样式） <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="65474" class="copybut" id="copybut65474" onclick="doCopy('code65474')"><u>复主代码</u></a></span> 代码아래: </div>
<div class="codebody" id="code65474"> <br>var CSSclass = {}; <br>CSSclass.is = function(e,c){ <br>if(typeof e == "string") e = document.getElementById(e); <br>var 클래스 = e.className; <br>if(!classes)는 false를 반환합니다. <br>if(classes == c)는 true를 반환합니다. <br>return e.className.search("\b" c "\b*") != -1; <br>}; <br>CSSclass.add = function(e,c){ <br>if(typeof e == "string") e = document.getElementById(e); <br>if(CSSclass.is(e,c))return; <br>//if(e.className) c="" c; <br>e.className = c; <br>}; <br>CSSclass.remove = function(e,c){ <br>if(typeof e == "string") e = document.getElementById(e); <br>//e.id = e.id.replace(new RegExp("\b" e.id "\b\s*","g"),""); <br>e.className = e.className.replace(new RegExp("\b" c "\b\s*","g"),""); <br>}; <br>
</div> <br>3、현재中加入如下元素 <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="39175" class="copybut" id="copybut39175" onclick="doCopy('code39175')"><u>复主代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code39175"> <br><div id="con"> <br><ul id="list"> <br><li><a href="#">홈</a></li> <br><li id="myblog"><a href="#">내 블로그</a></li> <br><li><a href="#">스포츠</a></li> <br><li><a href="#">뉴스</a></li> <br><li><a href="#">콘텐츠</a></li> <br></ul> <br><button type="button" name ="add" onclick = "CSSclass.add('con','container');">动态添加样式</button> <br><button type="button" name ="remove" onclick ="CSSclass.remove('con','container');">动态删除样式</button> <br>
</div> <br>效果： <br><br>
<p><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201204/20120407022003809.jpg" class="lazy" alt=""><br><span style="max-width:90%">没添加样式的样子<br></span><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/201204/20120407022003960.jpg" class="lazy" alt=""><br><span style="max-width:90%">加了样式之后。</span></p>small结：Dom文档操작、内联样式、动态设置样式等就给大家分享到这里吧! 🎜><br>（很多没有备注，大家有问题可以给我留言!) </div>
</div>
</div>
</div>
</div>
<div class="wzconShengming_sp">
<div class="bzsmdiv_sp">본 웹사이트의 성명</div>
<div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- <div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>인기 기사</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796780570.html" title="R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796780641.html" title="R.E.P.O. 최고의 그래픽 설정" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 최고의 그래픽 설정</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796785841.html" title="어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션" class="phpgenera_Details_mainR4_bottom_title">어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 몇 주 전</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796780520.html" title="R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796779766.html" title="WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법" class="phpgenera_Details_mainR4_bottom_title">WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/article.html">더보기</a>
</div>
</div>
</div> -->
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>핫 AI 도구</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>사실적인 누드 사진을 만들기 위한 AI 기반 앱</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>사진에서 옷을 제거하는 온라인 AI 도구입니다.</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>무료로 이미지를 벗다</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI 옷 제거제</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title">
<h3>AI Hentai Generator</h3>
</a>
<p>AI Hentai를 무료로 생성하십시오.</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/ai">더보기</a>
</div>
</div>
</div>
<script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>인기 기사</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796780570.html" title="R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796780641.html" title="R.E.P.O. 최고의 그래픽 설정" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 최고의 그래픽 설정</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796785841.html" title="어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션" class="phpgenera_Details_mainR4_bottom_title">어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 몇 주 전</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796780520.html" title="R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796779766.html" title="WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법" class="phpgenera_Details_mainR4_bottom_title">WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/article.html">더보기</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>뜨거운 도구</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="메모장++7.3.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_title">
<h3>메모장++7.3.1</h3>
</a>
<p>사용하기 쉬운 무료 코드 편집기</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 중국어 버전" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_title">
<h3>SublimeText3 중국어 버전</h3>
</a>
<p>중국어 버전, 사용하기 매우 쉽습니다.</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="스튜디오 13.0.1 보내기" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_title">
<h3>스튜디오 13.0.1 보내기</h3>
</a>
<p>강력한 PHP 통합 개발 환경</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="드림위버 CS6" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_title">
<h3>드림위버 CS6</h3>
</a>
<p>시각적 웹 개발 도구</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac 버전" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac 버전</h3>
</a>
<p>신 수준의 코드 편집 소프트웨어(SublimeText3)</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/ai">더보기</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>뜨거운 주제</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/gmailyxdlrkzn" title="Gmail 이메일의 로그인 입구는 어디에 있나요?" class="phpgenera_Details_mainR4_bottom_title">Gmail 이메일의 로그인 입구는 어디에 있나요?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>7454</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>15</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/cakephp-tutor" title="Cakephp 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">Cakephp 튜토리얼</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1375</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>52</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/steamdzhmcssmgs" title="Steam의 계정 이름 형식은 무엇입니까?" class="phpgenera_Details_mainR4_bottom_title">Steam의 계정 이름 형식은 무엇입니까?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>77</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>11</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/winactivationkeyper" title="Win11 활성화 키 영구" class="phpgenera_Details_mainR4_bottom_title">Win11 활성화 키 영구</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>40</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>19</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/newyorktimesdailybrief" title="NYT 연결 힌트와 답변" class="phpgenera_Details_mainR4_bottom_title">NYT 연결 힌트와 답변</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>14</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>9</span>
</div>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/faq/zt">더보기</a>
</div>
</div>
</div>
</div>
</div>
<div class="Article_Details_main2">
<div class="phpgenera_Details_mainL4">
<div class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div class="phpgenera_Details_mainL4_info">
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796777123.html" title="JavaScript로 문자열 문자를 교체하십시오" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174162283166996.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript로 문자열 문자를 교체하십시오" />
</a>
<a href="https://www.php.cn/ko/faq/1796777123.html" title="JavaScript로 문자열 문자를 교체하십시오" class="phphistorical_Version2_mids_title">JavaScript로 문자열 문자를 교체하십시오</a>
<span class="Articlelist_txts_time">Mar 11, 2025 am 12:07 AM</span>
<p class="Articlelist_txts_p">JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명
이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다.
JavaScript 코드 내부의 문자열을 교체하십시오
가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다.
str = str.replace ( "find", "replace");
이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오.
str = str.replace (/fi</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796781074.html" title="내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202503/18/2025031815123131507.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까?" />
</a>
<a href="https://www.php.cn/ko/faq/1796781074.html" title="내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까?" class="phphistorical_Version2_mids_title">내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까?</a>
<span class="Articlelist_txts_time">Mar 18, 2025 pm 03:12 PM</span>
<p class="Articlelist_txts_p">기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796781075.html" title="브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202503/18/2025031815143476606.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까?" />
</a>
<a href="https://www.php.cn/ko/faq/1796781075.html" title="브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까?" class="phphistorical_Version2_mids_title">브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까?</a>
<span class="Articlelist_txts_time">Mar 18, 2025 pm 03:14 PM</span>
<p class="Articlelist_txts_p">이 기사는 브라우저에서 JavaScript 성능을 최적화하기위한 전략에 대해 설명하고 실행 시간을 줄이고 페이지로드 속도에 미치는 영향을 최소화하는 데 중점을 둡니다.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796781076.html" title="브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202503/18/2025031815163423930.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까?" />
</a>
<a href="https://www.php.cn/ko/faq/1796781076.html" title="브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까?" class="phphistorical_Version2_mids_title">브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까?</a>
<span class="Articlelist_txts_time">Mar 18, 2025 pm 03:16 PM</span>
<p class="Articlelist_txts_p">이 기사는 브라우저 개발자 도구를 사용하여 효과적인 JavaScript 디버깅, 중단 점 설정, 콘솔 사용 및 성능 분석에 중점을 둡니다.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796777130.html" title="jQuery 성능을 즉시 향상시키는 10 가지 방법" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174162331228765.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="jQuery 성능을 즉시 향상시키는 10 가지 방법" />
</a>
<a href="https://www.php.cn/ko/faq/1796777130.html" title="jQuery 성능을 즉시 향상시키는 10 가지 방법" class="phphistorical_Version2_mids_title">jQuery 성능을 즉시 향상시키는 10 가지 방법</a>
<span class="Articlelist_txts_time">Mar 11, 2025 am 12:15 AM</span>
<p class="Articlelist_txts_p">이 기사는 스크립트의 성능을 크게 향상시키기위한 10 가지 간단한 단계를 간략하게 설명합니다. 이러한 기술은 간단하고 모든 기술 수준에 적용 할 수 있습니다.
계속 업데이트 : Vite와 같은 번들과 함께 NPM과 같은 패키지 관리자를 활용하여</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796777134.html" title="간단한 jQuery 슬라이더를 만드는 방법" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174162355144179.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="간단한 jQuery 슬라이더를 만드는 방법" />
</a>
<a href="https://www.php.cn/ko/faq/1796777134.html" title="간단한 jQuery 슬라이더를 만드는 방법" class="phphistorical_Version2_mids_title">간단한 jQuery 슬라이더를 만드는 방법</a>
<span class="Articlelist_txts_time">Mar 11, 2025 am 12:19 AM</span>
<p class="Articlelist_txts_p">이 기사에서는 jQuery 라이브러리를 사용하여 간단한 사진 회전 목마를 만들도록 안내합니다. jQuery를 기반으로 구축 된 BXSLIDER 라이브러리를 사용하고 회전 목마를 설정하기위한 많은 구성 옵션을 제공합니다.
요즘 그림 회전 목마는 웹 사이트에서 필수 기능이되었습니다. 한 사진은 천 단어보다 낫습니다!
그림 회전 목마를 사용하기로 결정한 후 다음 질문은 그것을 만드는 방법입니다. 먼저 고품질 고해상도 사진을 수집해야합니다.
다음으로 HTML과 일부 JavaScript 코드를 사용하여 사진 회전 목마를 만들어야합니다. 웹에는 다양한 방식으로 회전 목마를 만드는 데 도움이되는 라이브러리가 많이 있습니다. 오픈 소스 BXSLIDER 라이브러리를 사용할 것입니다.
BXSLIDER 라이브러리는 반응 형 디자인을 지원 하므로이 라이브러리로 제작 된 회전 목마는</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796777238.html" title="속도 및 MySQL과 함께 여권 사용" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174166225093195.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="속도 및 MySQL과 함께 여권 사용" />
</a>
<a href="https://www.php.cn/ko/faq/1796777238.html" title="속도 및 MySQL과 함께 여권 사용" class="phphistorical_Version2_mids_title">속도 및 MySQL과 함께 여권 사용</a>
<span class="Articlelist_txts_time">Mar 11, 2025 am 11:04 AM</span>
<p class="Articlelist_txts_p">속편은 약속 기반 Node.js ORM입니다. PostgreSQL, MySQL, MariaDB, Sqlite 및 MSSQL과 함께 사용할 수 있습니다. 이 튜토리얼에서는 웹 앱 사용자를위한 인증을 구현할 것입니다. 그리고 우리는 인기 인증 중간 인 여권을 사용할 것입니다</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/1796781077.html" title="소스 맵을 사용하여 조정 된 JavaScript 코드를 디버그하는 방법은 무엇입니까?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202503/18/2025031815173611347.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="소스 맵을 사용하여 조정 된 JavaScript 코드를 디버그하는 방법은 무엇입니까?" />
</a>
<a href="https://www.php.cn/ko/faq/1796781077.html" title="소스 맵을 사용하여 조정 된 JavaScript 코드를 디버그하는 방법은 무엇입니까?" class="phphistorical_Version2_mids_title">소스 맵을 사용하여 조정 된 JavaScript 코드를 디버그하는 방법은 무엇입니까?</a>
<span class="Articlelist_txts_time">Mar 18, 2025 pm 03:17 PM</span>
<p class="Articlelist_txts_p">이 기사는 소스 맵을 사용하여 원래 코드에 다시 매핑하여 미니어링 된 JavaScript를 디버그하는 방법을 설명합니다. 소스 맵 활성화, 브레이크 포인트 설정 및 Chrome Devtools 및 Webpack과 같은 도구 사용에 대해 설명합니다.</p>
</div>
</div>
<a href="https://www.php.cn/ko/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div class="footer">
<div class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p>
</div>
<div class="footermid">
<a href="https://www.php.cn/ko/about/us.html">회사 소개</a>
<a href="https://www.php.cn/ko/about/disclaimer.html">부인 성명</a>
<a href="https://www.php.cn/ko/update/article_0_1.html">Sitemap</a>
</div>
<div class="footerbottom">
<p>
© php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>
<script src="/static/js/common_new.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js?1744302443"></script>
<script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<script type='text/javascript' src='/static/js/viewer.min.js?1'></script>
<script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script>
<script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script>
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
var u = "https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u + 'matomo.php']);
_paq.push(['setSiteId', '9']);
var d = document,
g = d.createElement('script'),
s = d.getElementsByTagName('script')[0];
g.async = true;
g.src = u + 'matomo.js';
s.parentNode.insertBefore(g, s);
})();
</script>
<script>
// top
layui.use(function () {
var util = layui.util;
util.fixbar({
on: {
mouseenter: function (type) {
layer.tips(type, this, {
tips: 4,
fixed: true,
});
},
mouseleave: function (type) {
layer.closeAll("tips");
},
},
});
});
document.addEventListener("DOMContentLoaded", (event) => {
// 定义一个函数来处理滚动链接的点击事件
function setupScrollLink(scrollLinkId, targetElementId) {
const scrollLink = document.getElementById(scrollLinkId);
const targetElement = document.getElementById(targetElementId);
if (scrollLink && targetElement) {
scrollLink.addEventListener("click", (e) => {
e.preventDefault(); // 阻止默认链接行为
targetElement.scrollIntoView({
behavior: "smooth"
}); // 平滑滚动到目标元素
});
} else {
console.warn(
`Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.`
);
}
}
// 使用该函数设置多个滚动链接
setupScrollLink("Article_Details_main1L2s_1", "article_main_title1");
setupScrollLink("Article_Details_main1L2s_2", "article_main_title2");
setupScrollLink("Article_Details_main1L2s_3", "article_main_title3");
setupScrollLink("Article_Details_main1L2s_4", "article_main_title4");
setupScrollLink("Article_Details_main1L2s_5", "article_main_title5");
setupScrollLink("Article_Details_main1L2s_6", "article_main_title6");
// 可以继续添加更多的滚动链接设置
});
window.addEventListener("scroll", function () {
var fixedElement = document.getElementById("Article_Details_main1Lmain");
var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器
var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度
var scrollHeight = document.documentElement.scrollHeight; // 页面总高度
// 计算距离底部的距离
var distanceToBottom = scrollHeight - scrollTop - clientHeight;
// 当距离底部小于或等于300px时，取消固定定位
if (distanceToBottom <= 980) {
fixedElement.classList.remove("Article_Details_main1Lmain");
fixedElement.classList.add("Article_Details_main1Lmain_relative");
} else {
// 否则，保持固定定位
fixedElement.classList.remove("Article_Details_main1Lmain_relative");
fixedElement.classList.add("Article_Details_main1Lmain");
}
});
</script>
</body>
</html> 
