十分钟迁移到Thymeleaf 3
如果你是打算从Thymeleaf2迁移到Thymeleaf3的用户。首先，一个好消息是你当前的Thymeleaf模板与Thymeleaf3完全兼容。所以，如果要进行迁移，你只要做一些配置上的修改。
Thymeleaf 3.0 BETA版本是稳定且完全覆盖2.1版本的特性，所以，推荐你进行升级。因为新版本的性能更好而且有许多新的特性。
唯一的问题是，不是所有的Thymeleaf方言（dialect）都迁移到了Thymeleaf 3中。因此，在迁移前要做好这方面的兼容性检查。
下面来介绍一下Thymeleaf 3中的一些变化和特性。
1. 模板变化
唯一的变化是，推荐你去掉模板中的 th:inline=“text” 属性。因为在HTML或XML模板中，不再需要该属性去支持文本中内联表达式的特性。当然，只是推荐你去去掉该属性，不去掉，你原来模板一样可以工作。去掉的好处是会给你带来执行性能方面的提升。
详细信息可参见下文的 内联机制 部分。
2. 配置变化
看一个thymeleaf-spring4集成的配置文件例子。
首先你需要更新Maven依赖
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.0.0.BETA02</version></dependency><dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring4</artifactId>
<version>3.0.0.BETA02</version></dependency>
Salin selepas log masuk
然后是spring 配置
@Configuration@EnableWebMvc@ComponentScan("com.thymeleafexamples")
public class ThymeleafConfig extends WebMvcConfigurerAdapter implements ApplicationContextAware
{
private ApplicationContext applicationContext;
public void setApplicationContext(ApplicationContext applicationContext) {
this.applicationContext = applicationContext;
} @Bean
public ViewResolver viewResolver()
{
ThymeleafViewResolver resolver = new ThymeleafViewResolver();
resolver.setTemplateEngine(templateEngine());
resolver.setCharacterEncoding("UTF-8");
return resolver;
}
private TemplateEngine templateEngine() {
SpringTemplateEngine engine = new SpringTemplateEngine();
engine.setTemplateResolver(templateResolver());
return engine;
}
private ITemplateResolver templateResolver()
{
SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
resolver.setApplicationContext(applicationContext);
resolver.setPrefix("/WEB-INF/templates/");
resolver.setTemplateMode(TemplateMode.HTML);
return resolver;
}}Salin selepas log masuk
与Thymeleaf 2相比，第一个区别是，现在推荐的模板解析类是 SpringResourceTemplateResolver。该类依赖于 Spring的ApplicationContext 上下文。因此，你的配置类需要实现 ApplicationContextAware 接口。
第二个区别是。提供了TemplateMode.HTML 枚举常量。模板类型的方法参数不再是string类型的。
如果你需要添加其他方言，可以通过engine.addDialect(…)方法，当然你需要先确认Thymeleaf 3是否支持。
你可以到官方下载一些集成配置的例子。
Thymeleaf 3 + Spring 4 + Java config example
Thymeleaf 3 + Spring 4 + XML config example
Thymeleaf 3 + Servlet 3 example
3. 完整的HTML5 标记支持
Thymeleaf 3.0 不再是基于XML结构的。由于引入新的解析引擎，模板的内容格式不再需要严格遵守XML规范。即不在要求标签闭合，属性加引号等等。当然，出于易读性考虑，还是推荐你按找XML的标准去编写模板。
下面的代码在Thymeleaf 3.0里是合法的：
<p><p th:text=${mytext} ng-app>WhateverSalin selepas log masuk
4. 模板类型
Thymeleaf 3 移除了之前版本的模板类型，新的模板类型为：
HTML
XML
TEXT
JAVASCRIPT
CSS
RAW
2个标记型模板(HTML和XML)，3个文本型模板(TEXT, JAVASCRIPT和CSS) 一个无操作(no-op)模板 (RAW)。
HTML模板支持包括HTML5，HTML4和XHTML在内的所有类型的HTML标记。且不会检查标记是否完整闭合。此时，标记的作用范围按可能的最大化处理。
4.1 文本型模板
文本型模板使得Thymeleaf可以支持输出CSS、Javascript和文本文件。在你想要在CSS或Javascript文件中使用服务端的变量时；或者想要输出纯文本的内容时，比如，在邮件中，该特性是否有用。
在文本模式中使用Thymeleaf的特性，你需要使用一种新的语法，例如：
[# th:each="item : ${items}"] - [# th:utext="${item}" /][/]Salin selepas log masuk
4.2 增强的内联机制
现在可无需额外的标签，直接在文本中输出数据：
This product is called [[${product.name}]] and it's great!
详见：Inlined output expressions 关于内联机制的讨论： Refactoring of the inlining mechanism
5. 片段（Fragment）表达式
Thymeleaf 3.0 引入了一个新的片段表达式。形如：~{commons::footer}。
该特性十分有用（真的是是否有用，直接解决了一直困扰我的定义通用的header和footer的问题）。直接看例子来理解一下该语法吧：
<head th:replace="base :: common_header(~{::title},~{::link})">
<title>Awesome - Main</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}"></head>Salin selepas log masuk
这里，将两外另个包含
和<link>标签的片段作为参数传递给了common_header片段，在common_header中使用如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>head th:fragment="common_header(title,links)">
<title th:replace="${title}">The awesome application</title>
<!-- Common styles and scripts -->
<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
<script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>
<!--/* Per-page placeholder for additional links */-->
<th:block th:replace="${links}" /></head></pre><div class="contentsignin">Salin selepas log masuk</div></div><p>渲染出结果如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><head>
<title>Awesome - Main</title>
<!-- Common styles and scripts -->
<link rel="stylesheet" type="text/css" media="all" href="/awe/css/awesomeapp.css">
<link rel="shortcut icon" href="/awe/images/favicon.ico">
<script type="text/javascript" src="/awe/sh/scripts/codebase.js"></script>
<link rel="stylesheet" href="/awe/css/bootstrap.min.css">
<link rel="stylesheet" href="/awe/themes/smoothness/jquery-ui.css"></head></pre><div class="contentsignin">Salin selepas log masuk</div></div><p>6. 无操作标记（token）</p><p>Thymeleaf 3.0 另一个新的特性就是无操作（NO-OP no-operation）标记，下划线”_”，代表什么也不做。</p><p>例如：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><span th:text="${user.name} ?: _">no user authenticated</span></pre><div class="contentsignin">Salin selepas log masuk</div></div><p>当user.name 为空的时候，直接输出标签体中的内容：no user authenticated。该特性让我们可以直接使用原型模板中的值作为默认值。</p><p>该特性详细资料参考： The NO-OP token</p><p>7 模板逻辑解耦</p><p>Thymeleaf 3.0 允许 HTML和XML模式下的模板内容和控制逻辑完全解耦。</p><p>例如，在3.0版本里，一个“干净”的home.html模板内容如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE html><html>
<body>
<table id="usersTable">
<tr>
<td class="username">Jeremy Grapefruit</td>
<td class="usertype">Normal User</td>
</tr>
<tr>
<td class="username">Alice Watermelon</td>
<td class="usertype">Administrator</td>
</tr>
</table>
</body></html></pre><div class="contentsignin">Salin selepas log masuk</div></div><p>我们只需额外定义一个home.th.xml文件，就可以把之前的home.html文件当作Thymeleaf模板来使用，内容如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><?xml version="1.0"?><thlogic>
<attr sel="#usersTable" th:remove="all-but-first">
<attr sel="/tr[0]" th:each="user : ${users}">
<attr sel="td.username" th:text="${user.name}" />
<attr sel="td.usertype" th:text="#{|user.type.${user.type}|}" />
</attr>
</attr></thlogic></pre><div class="contentsignin">Salin selepas log masuk</div></div><p>逻辑解耦时，指定的属性会在模本解析的过程中插入指定的位置。通过sel属性指定选择器。</p><p>逻辑解耦，意味着可以使用纯HTML文件作为设计模板，允许设计人员不再需要具备Thymeleaf的相关知识。 详细介绍： Decoupled Template Logic</p><p>8. 性能提升</p><p>除了之前提到的特性之外，Thymeleaf 3.0 的另外一个重要突破就是有明显的性能提升。</p><p>2.1版本之前采用的基于XML的模板引擎，虽然有助于实现很多的特性，但是在有些情况下也造成了性能的损失。在绝大多数的项目里Thymeleaf的渲染时间是几乎可以忽略不计的，这也就凸显出来了Thymeleaf在某些特定情景下的性能问题。(例如：在高负载的网站中处理成千上万行的表格)。</p><p>Thymeleaf 3 重点关注性能问题并完全重写了引擎。因此与之前版本相比性能有很大的提升。而且，这种提升不仅仅局限于渲染时间，也包括更低的内存占用以及在高并发场景下的低延迟。</p><p>关于Thymeleaf 3 技术架构的讨论可参见： New event-based template processing engine</p><p>值得一提的是，性能提升不仅是架构层面的事，也包括3.0 版本里的一些有助于性能提升的新特性。例如，在3.0版本里使用SpringEL表达式的编译器(从Spring Framework4.2.4版本开始)，在使用Spring的场景下，可进一步的提升性能。具体参见： Configuring the SpringEL compiler</p><p>即使没有使用Spring而是使用OGNL表达式，在3.0版本里也有性能优化。Thymeleaf甚至给OGNL代码库贡献了很多源码，这些代码有助于提升Thymeleaf在新的MVC1.0（JSR371）标准环境下的性能。</p><p>9. 不依赖于Servlet API</p><p>其实Thymeleaf3.0 之前版本在离线执行的情况下已经做到了不依赖于Java Servlet API，就是说在执行模板的过程中不依赖于Web容器。一个实用的场景就是用作邮件模板。</p><p>然而，在Thymeleaf3.0里做到了在Web环境下也完全不依赖Servlet API。这样就使得与那些不依赖Java Servlet框架（如 vert.x, RatPack, Play Framework）的集成更加简单方便。</p><p>更多参见： New extension point: Link Builders和 Generalisation of the IEngineContext mechanism.</p><p>10. 新的方言系统</p><p>Thymeleaf 3 提供了新的方言系统。如果你在早期版本上开发了Thymeleaf的方言，你需要使其与Thymeleaf 3 兼容。</p><p>新的方言接口十分简单</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>public interface IDialect
{
public String getName();
}</pre><div class="contentsignin">Salin selepas log masuk</div></div><p>可以通过实现IDialect的子类接口，实现更多不同的特性。</p>
<p>列举一下新方言系统增强的点：</p>
<p>除了processors之外，还提供了pre-processors 和 post-processors，模板的内容可以在处理之前和之后被修改。例如，我们可以使用pre-processors来缓存内容或者用post-processors来压缩输出结果。</p>
<p>提出了方言优先级的概念，可以对方言的处理器(processor)进行排序。处理器优先级的排序是跨方言的。</p>
<p>对象表达式方言提供可以模本内任意地方使用的新的表达式对象和工具对象。如：#strings, #numbers, #dates 等。</p>
<p>更多特性，可参见：</p>
<p>New Dialect API</p>
<p>New Pre-Processor and Post-Processor APIs</p>
<p>New Processor API</p>
<p>11 重构了核心API</p>
<p>核心接口进行了深度重构，详见：</p>
<p>Refactoring of the Template Resolution API</p>
<p>Refactoring of the Context API</p>
<p>Refactoring of the Message Resolution API</p>
<p>12 总结</p>
<p>Thymeleaf 3 是Thymeleaf 模板引擎经过4年多不懈的努力和工作后的一个重要的里程碑式的成果。提供了许多令人兴奋的新特性以及许多隐藏的改进。 所以，别再犹豫，赶紧来试试吧。</p>
</div>
</div>
<div class="wzconShengming_sp">
<div class="bzsmdiv_sp">Kenyataan Laman Web ini</div>
<div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi 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>Artikel Panas</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/1796780570.html" title="R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/1796780641.html" title="R.E.P.O. Tetapan grafik terbaik" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Tetapan grafik terbaik</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/1796785841.html" title="Assassin's Creed Shadows: Penyelesaian Riddle Seashell" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Penyelesaian Riddle Seashell</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 minggu yang lalu</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/1796780520.html" title="R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/1796780523.html" title="R.E.P.O. Arahan sembang dan cara menggunakannya" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Arahan sembang dan cara menggunakannya</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ms/article.html">Tunjukkan Lagi</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>Alat AI Hot</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ms/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/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>Apl berkuasa AI untuk mencipta foto bogel yang realistik</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ms/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/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ms/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/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Gambar buka pakaian secara percuma</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ms/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/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>Penyingkiran pakaian AI</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ms/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/ms/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title">
<h3>AI Hentai Generator</h3>
</a>
<p>Menjana ai hentai secara percuma.</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ms/ai">Tunjukkan Lagi</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>Artikel Panas</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/1796780570.html" title="R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/1796780641.html" title="R.E.P.O. Tetapan grafik terbaik" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Tetapan grafik terbaik</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/1796785841.html" title="Assassin's Creed Shadows: Penyelesaian Riddle Seashell" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Penyelesaian Riddle Seashell</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 minggu yang lalu</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/1796780520.html" title="R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/1796780523.html" title="R.E.P.O. Arahan sembang dan cara menggunakannya" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Arahan sembang dan cara menggunakannya</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ms/article.html">Tunjukkan Lagi</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>Alat panas</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ms/toolset/development-tools/92" title="Notepad++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="Notepad++7.3.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Editor kod yang mudah digunakan dan percuma</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" 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 versi Cina" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_title">
<h3>SublimeText3 versi Cina</h3>
</a>
<p>Versi Cina, sangat mudah digunakan</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ms/toolset/development-tools/121" title="Hantar Studio 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="Hantar Studio 13.0.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Hantar Studio 13.0.1</h3>
</a>
<p>Persekitaran pembangunan bersepadu PHP yang berkuasa</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ms/toolset/development-tools/469" title="Dreamweaver 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="Dreamweaver CS6" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Alat pembangunan web visual</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ms/toolset/development-tools/500" title="SublimeText3 versi 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 versi Mac" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_title">
<h3>SublimeText3 versi Mac</h3>
</a>
<p>Perisian penyuntingan kod peringkat Tuhan (SublimeText3)</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ms/ai">Tunjukkan Lagi</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>Topik panas</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/gmailyxdlrkzn" title="Di manakah pintu masuk log masuk untuk e-mel gmail?" class="phpgenera_Details_mainR4_bottom_title">Di manakah pintu masuk log masuk untuk e-mel gmail?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>7530</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/ms/faq/cakephp-tutor" title="Tutorial CakePHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial CakePHP</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1378</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/ms/faq/steamdzhmcssmgs" title="Apakah format nama akaun stim" class="phpgenera_Details_mainR4_bottom_title">Apakah format nama akaun stim</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>82</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/ms/faq/winactivationkeyper" title="kunci pengaktifan win11 kekal" class="phpgenera_Details_mainR4_bottom_title">kunci pengaktifan win11 kekal</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>54</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/ms/faq/newyorktimesdailybrief" title="Sambungan NYT menunjukkan dan jawapan" class="phpgenera_Details_mainR4_bottom_title">Sambungan NYT menunjukkan dan jawapan</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>21</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>76</span>
</div>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ms/faq/zt">Tunjukkan Lagi</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/ms/faq/1796782759.html" title="Apakah tujuan & lt; kemajuan & gt; unsur?" 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/21/2025032112342868456.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah tujuan & lt; kemajuan & gt; unsur?" />
</a>
<a href="https://www.php.cn/ms/faq/1796782759.html" title="Apakah tujuan & lt; kemajuan & gt; unsur?" class="phphistorical_Version2_mids_title">Apakah tujuan & lt; kemajuan & gt; unsur?</a>
<span class="Articlelist_txts_time">Mar 21, 2025 pm 12:34 PM</span>
<p class="Articlelist_txts_p">Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ms/faq/1796780220.html" title="Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?" 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/17/2025031712203454598.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?" />
</a>
<a href="https://www.php.cn/ms/faq/1796780220.html" title="Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?" class="phphistorical_Version2_mids_title">Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?</a>
<span class="Articlelist_txts_time">Mar 17, 2025 pm 12:20 PM</span>
<p class="Articlelist_txts_p">Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ms/faq/1796782758.html" title="Apakah tujuan & lt; DATALIST & GT; unsur?" 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/21/2025032112332857446.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah tujuan & lt; DATALIST & GT; unsur?" />
</a>
<a href="https://www.php.cn/ms/faq/1796782758.html" title="Apakah tujuan & lt; DATALIST & GT; unsur?" class="phphistorical_Version2_mids_title">Apakah tujuan & lt; DATALIST & GT; unsur?</a>
<span class="Articlelist_txts_time">Mar 21, 2025 pm 12:33 PM</span>
<p class="Articlelist_txts_p">Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ms/faq/1796780224.html" title="Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?" 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/17/2025031712273147081.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?" />
</a>
<a href="https://www.php.cn/ms/faq/1796780224.html" title="Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?" class="phphistorical_Version2_mids_title">Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?</a>
<span class="Articlelist_txts_time">Mar 17, 2025 pm 12:27 PM</span>
<p class="Articlelist_txts_p">Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ms/faq/1796782760.html" title="Apakah tujuan & lt; meter & gt; unsur?" 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/21/2025032112352661331.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah tujuan & lt; meter & gt; unsur?" />
</a>
<a href="https://www.php.cn/ms/faq/1796782760.html" title="Apakah tujuan & lt; meter & gt; unsur?" class="phphistorical_Version2_mids_title">Apakah tujuan & lt; meter & gt; unsur?</a>
<span class="Articlelist_txts_time">Mar 21, 2025 pm 12:35 PM</span>
<p class="Articlelist_txts_p">Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ms/faq/1796782305.html" title="Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif?" 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/20/2025032017560614263.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif?" />
</a>
<a href="https://www.php.cn/ms/faq/1796782305.html" title="Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif?" class="phphistorical_Version2_mids_title">Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif?</a>
<span class="Articlelist_txts_time">Mar 20, 2025 pm 05:56 PM</span>
<p class="Articlelist_txts_p">Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ms/faq/1796782318.html" title="Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?" 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/20/2025032018054766795.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?" />
</a>
<a href="https://www.php.cn/ms/faq/1796782318.html" title="Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?" class="phphistorical_Version2_mids_title">Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?</a>
<span class="Articlelist_txts_time">Mar 20, 2025 pm 06:05 PM</span>
<p class="Articlelist_txts_p">Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ms/faq/1796791823.html" title="Adakah HTML mudah belajar untuk pemula?" 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/253/068/174395586298618.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Adakah HTML mudah belajar untuk pemula?" />
</a>
<a href="https://www.php.cn/ms/faq/1796791823.html" title="Adakah HTML mudah belajar untuk pemula?" class="phphistorical_Version2_mids_title">Adakah HTML mudah belajar untuk pemula?</a>
<span class="Articlelist_txts_time">Apr 07, 2025 am 12:11 AM</span>
<p class="Articlelist_txts_p">HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.</p>
</div>
</div>
<a href="https://www.php.cn/ms/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>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p>
</div>
<div class="footermid">
<a href="https://www.php.cn/ms/about/us.html">Tentang kita</a>
<a href="https://www.php.cn/ms/about/disclaimer.html">Penafian</a>
<a href="https://www.php.cn/ms/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?1744828464"></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> 
