CN112559104A - 一种页面样式切换方法、装置、计算机设备及存储介质 - Google Patents

Abstract

本公开提供了一种页面样式切换方法、装置、计算机设备及存储介质，其中，页面样式切换方法包括：响应由第一背景模式切换至第二背景模式的操作，获取在第一背景模式下目标页面中页面元素对应的第一页面样式信息，进而，基于第一背景模式下页面元素对应的第一页面样式信息，确定在第二背景模式下页面元素对应的第二页面样式信息，按照页面元素对应的第二页面样式信息，重新加载目标页面的页面元素。通过生成模式切换后的页面元素的页面样式信息，可以在满足页面元素的页面样式与暗黑模式的适配效果的同时，提升适配效率。

Description

一种页面样式切换方法、装置、计算机设备及存储介质

技术领域

本公开涉及终端显示技术领域，具体而言，涉及一种页面样式切换方法、装置、计算机设备及存储介质。

背景技术

暗黑模式可以改善视力和强光下的人的可视性，以及在弱光环境中更好地使用设备的效果，因而，目前不同操作系统的移动终端都相继尝试推出暗黑模式。

但是，在移动终端使用暗黑模式后，各个应用程序(App)都需要与暗黑模式进行适配，而现有的App中有很多的页面和模块都是由超文本5.0(HTML5.0)来开发的，大型App一般有成百上千的H5页面或模块，各个H5页面或模块的逐一适配需要花费巨大的人力物力，完成难度极高。因此，如何在提升适配效率的同时，满足适配效果是目前亟待解决的技术问题。

发明内容

本公开实施例至少提供一种页面样式切换方法、装置、计算机设备及存储介质，可以在满足页面元素的页面样式与暗黑模式的适配效果的同时，提升适配效率。

第一方面，本公开实施例提供了一种页面样式切换方法，所述方法包括：

响应由第一背景模式切换至第二背景模式的操作，获取在所述第一背景模式下目标页面中页面元素对应的第一页面样式信息；

基于所述第一背景模式下所述页面元素对应的第一页面样式信息，确定在所述第二背景模式下所述页面元素对应的第二页面样式信息；

按照所述页面元素对应的第二页面样式信息，重新加载所述目标页面的所述页面元素。

一种可选的实施方式中，若所述页面元素为文本元素，所述第一页面样式信息为颜色样式信息；所述基于所述第一背景模式下所述页面元素对应的第一页面样式信息，确定在所述第二背景模式下所述页面元素对应的第二页面样式信息，包括：

查询预设的颜色样式映射表中是否存在所述第一背景模式下的所述文本元素的第一颜色；

若存在，从所述颜色样式映射表中，查询与在所述第一背景模式下的所述第一颜色对应的在所述第二背景模式下的第二颜色；

将所述第二颜色确定为在所述第二背景模式下所述页面元素对应的第二页面样式信息。

一种可选的实施方式中，所述页面样式切换方法还包括：

若不存在，确定所述颜色样式映射表中在所述第一背景模式下与所述第一颜色相近似的第三颜色；

从所述颜色样式映射表中，查询与在所述第一背景模式下的所述第三颜色对应的在所述第二背景模式下的所述第二颜色；

将所述第二颜色确定为在所述第二背景模式下所述页面元素对应的第二页面样式信息。

一种可选的实施方式中，在所述获取在所述第一背景模式下目标页面中页面元素对应的第一页面样式信息之后，所述页面样式切换方法还包括：

监听所述页面元素对应的第一页面样式信息是否发生变更；

若是，获取变更后的所述页面元素对应的第三页面样式信息，并基于所述第一背景模式下所述页面元素对应的第三页面样式信息，确定在所述第二背景模式下所述页面元素对应的第四页面样式信息；

按照所述页面元素对应的第四页面样式信息，重新加载所述目标页面的所述页面元素。

一种可选的实施方式中，若所述页面元素为图片元素，所述第一页面样式信息为第一图片链接信息；所述基于所述第一背景模式下所述页面元素对应的第一页面样式信息，确定在所述第二背景模式下所述页面元素对应的第二页面样式信息，包括：

根据所述第一背景模式和所述第一图片链接信息，确定在所述第二背景模式下的所述图片元素对应的第二图片链接信息；

将所述第二图片链接信息确定为在所述第二背景模式下的所述页面元素对应的第二页面样式信息。

一种可选的实施方式中，若所述页面元素为文本元素，通过以下方式获取在所述第一背景模式下目标页面中页面元素对应的第一页面样式信息：

嵌入样式标签方式、外部样式标签方式、内联样式标签方式。

一种可选的实施方式中，页面样式信息包括以下信息中的至少一种：

文字颜色显示信息、背景颜色显示信息、边框颜色显示信息、炫富状态的颜色显示信息、点击状态的颜色显示信息、图片链接信息。

第二方面，本公开实施例还提供一种页面样式切换装置，所述装置包括：

获取模块，用于响应由第一背景模式切换至第二背景模式的操作，获取在所述第一背景模式下目标页面中页面元素对应的第一页面样式信息；

确定模块，用于基于所述第一背景模式下所述页面元素对应的第一页面样式信息，确定在所述第二背景模式下所述页面元素对应的第二页面样式信息；

加载模块，用于按照所述页面元素对应的第二页面样式信息，重新加载所述目标页面的所述页面元素。

一种可选的实施方式中，若所述页面元素为文本元素，所述第一页面样式信息为颜色样式信息；所述确定模块，用于根据以下步骤确定在所述第二背景模式下所述页面元素对应的第二页面样式信息：

查询预设的颜色样式映射表中是否存在所述第一背景模式下的所述文本元素的第一颜色；

若存在，从所述颜色样式映射表中，查询与在所述第一背景模式下的所述第一颜色对应的在所述第二背景模式下的第二颜色；

将所述第二颜色确定为在所述第二背景模式下所述页面元素对应的第二页面样式信息。

一种可选的实施方式中，所述确定模块，还用于：

若不存在，确定所述颜色样式映射表中在所述第一背景模式下与所述第一颜色相近似的第三颜色；

从所述颜色样式映射表中，查询与在所述第一背景模式下的所述第三颜色对应的在所述第二背景模式下的所述第二颜色；

将所述第二颜色确定为在所述第二背景模式下所述页面元素对应的第二页面样式信息。

一种可选的实施方式中，所述页面样式切换装置还包括监听模块；所述监听模块用于：

监听所述页面元素对应的第一页面样式信息是否发生变更；

若是，获取变更后的所述页面元素对应的第三页面样式信息，并基于所述第一背景模式下所述页面元素对应的第三页面样式信息，确定在所述第二背景模式下所述页面元素对应的第四页面样式信息；

按照所述页面元素对应的第四页面样式信息，重新加载所述目标页面的所述页面元素。

一种可选的实施方式中，若所述页面元素为图片元素，所述第一页面样式信息为第一图片链接信息；确定模块包括：

第一确定单元，用于根据所述第一背景模式和所述第一图片链接信息，确定在所述第二背景模式下的所述图片元素对应的第二图片链接信息；

第二确定单元，用于将所述第二图片链接信息确定为在所述第二背景模式下的所述页面元素对应的第二页面样式信息。

一种可选的实施方式中，所述获取模块，用于若所述页面元素为文本元素，通过以下方式获取在所述第一背景模式下目标页面中页面元素对应的第一页面样式信息：

嵌入样式标签方式、外部样式标签方式、内联样式标签方式。

一种可选的实施方式中，页面样式信息包括以下信息中的至少一种：

文字颜色显示信息、背景颜色显示信息、边框颜色显示信息、炫富状态的颜色显示信息、点击状态的颜色显示信息、图片链接信息。

第三方面，本公开实施例还提供一种计算机设备，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当计算机设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。

第四方面，本公开实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行上述第一方面，或第一方面中任一种可能的实施方式中的步骤。

本公开实施例提供的页面样式切换方法、装置、计算机设备及存储介质，通过生成模式切换后的页面元素的页面样式信息，与现有技术中各个H5页面或模块的逐一适配需要花费巨大的人力物力，完成难度极高相比，本公开可以在满足页面元素的页面样式与暗黑模式的适配效果的同时，提升适配效率。

进一步，本公开实施例提供的页面样式切换方法，若页面元素为文本元素，第一页面样式信息为颜色样式信息，通过查询预设的颜色样式映射表中第一背景模式下的文本元素的第一颜色，确定第一背景模式下的第一颜色对应的在第二背景模式下的第二颜色，进而，将第二颜色确定为在第二背景模式下页面元素对应的第二页面样式信息，这样，可以快速生成切换模式后的页面元素的页面样式信息，可以实现页面元素的页面样式与暗黑模式的适配效果。

为使本公开的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本公开实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，此处的附图被并入说明书中并构成本说明书中的一部分，这些附图示出了符合本公开的实施例，并与说明书一起用于说明本公开的技术方案。应当理解，以下附图仅示出了本公开的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本公开实施例所提供的一种页面样式切换方法的流程图；

图2示出了本公开实施例所提供的一种页面样式切换装置的示意图之一；

图3示出了本公开实施例所提供的一种页面样式切换装置的示意图之二；

图4示出了本公开实施例所提供的页面样式切换装置中，确定模块的具体示意图；

图5示出了本公开实施例所提供的一种计算机设备的示意图。

图示说明：200-页面样式切换装置；210-获取模块；220-确定模块；221-第一确定单元；222-第二确定单元；230-加载模块；240监听模块-；500-计算机设备；501-处理器；502-存储器；5021-内存；5022-外部存储器；503-总线。

具体实施方式

为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中附图，对本公开实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本公开实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本公开的实施例的详细描述并非旨在限制要求保护的本公开的范围，而是仅仅表示本公开的选定实施例。基于本公开的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。

经研究发现，暗黑模式可以改善视力和强光下的人的可视性，以及在弱光环境中更好地使用设备的效果，因而，目前不同操作系统的移动终端都相继尝试推出暗黑模式。

但是，在移动终端使用暗黑模式后，各个App都需要与暗黑模式进行适配，而现有的App中有很多的页面和模块都是由超文本5.0来开发的，大型App一般有成百上千的H5页面或模块，各个H5页面或模块的逐一适配需要花费巨大的人力物力，完成难度极高，因此，如何在提升适配效率的同时，满足适配效果是目前亟待解决的技术问题。

基于上述研究，本公开提供了一种页面样式切换方法、装置、计算机设备及存储介质，响应由第一背景模式切换至第二背景模式的操作，获取在第一背景模式下目标页面中页面元素对应的第一页面样式信息，进而，基于第一背景模式下页面元素对应的第一页面样式信息，确定在第二背景模式下页面元素对应的第二页面样式信息，按照页面元素对应的第二页面样式信息，重新加载目标页面的页面元素。通过生成模式切换后的页面元素的页面样式信息，可以在满足页面元素的页面样式与暗黑模式的适配效果的同时，提升适配效率。

本公开阐述的方案，均是发明人在经过实践并仔细研究后得出的结果，因此，上述问题的发现过程以及下文中本公开针对上述问题所提出的解决方案，都应该是发明人对本公开做出的贡献。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

为便于对本实施例进行理解，首先对本公开实施例所公开的页面样式切换方法进行详细介绍，本公开实施例所提供的页面样式切换方法的执行主体一般为具有一定计算能力的计算机设备，该计算机设备例如包括：终端设备或服务器或其它处理设备，终端设备可以为用户设备(User Equipment，UE)、移动设备、用户终端、终端、蜂窝电话、无线电话、个人数字处理(Personal Digital Assistant，PDA)、手持设备、计算设备、车载设备、可穿戴设备等。在一些可能的实现方式中，该页面样式切换方法可以通过处理器调用存储器中存储的计算机可读指令的方式来实现。

下面以执行主体为终端设备为例对本公开实施例提供的页面样式切换方法加以说明。

实施例一

参见图1所示，为本公开实施例提供的一种页面样式切换方法的流程图，所述方法包括步骤S101～S103，其中：

S101：响应由第一背景模式切换至第二背景模式的操作，获取在所述第一背景模式下目标页面中页面元素对应的第一页面样式信息。

在该步骤中，在接收到由第一背景模式切换至第二背景模式的操作指令后，先获取在第一背景模式目标页面中各个页面元素对应的第一页面样式信息。这里，目标页面为在接收到模式切换指令时，终端设备正在显示的当前页面，目标页面上显示有多个页面元素，页面元素可以为文本元素，也可以为图片元素。

其中，各个页面元素以相同或不同的页面样式进行显示，页面样式信息包括以下信息中的至少一种：文字颜色显示信息、背景颜色显示信息、边框颜色显示信息、炫富状态的颜色显示信息、点击状态的颜色显示信息、图片链接信息。

这里，要求第一背景模式和第二背景模式为不同的背景模式，背景模式包括暗黑模式和常规模式，即，第一背景模式为暗黑模式时，第二背景模式为常规模式，或者，第一背景模式为常规模式，第二背景模式为暗黑模式，其中，常规模式可以为浅色模式、白天模式中的一种。

S102：基于所述第一背景模式下所述页面元素对应的第一页面样式信息，确定在所述第二背景模式下所述页面元素对应的第二页面样式信息。

在该步骤中，在获取在第一背景模式下目标页面中任一页面元素对应的第一页面样式信息之后，可以根据在第一背景模式下的该页面元素的第一页面样式信息，确定出在第二背景模式下该页面元素对应的第二页面样式信息。

进一步地，页面元素也可以为文本元素，也可以为图片元素，对于文本元素和图片元素所采取的获取该页面元素的第一页面样式信息的方式不同，下面先对页面元素为文本元素的情况进行阐述：

通过以下方式获取在所述第一背景模式下目标页面中页面元素对应的第一页面样式信息：嵌入样式标签方式、外部样式标签方式、内联样式标签方式。

在具体实施中，页面样式有多种声明方式，页面样式声明包括但不限于嵌入样式标签方式(style标签)、外部样式标签方式(link标签)、内联样式标签方式(HTML style)，因此，对于文本元素，可以使用与该文本元素对应的样式声明来获取在第一背景模式下目标页面中该页面元素对应的第一页面样式信息。

另外，对页面元素为图片元素的情况进行阐述，可以获取该图片元素的图片链接，并将该图片元素对应的图片链接信息确定为在第一背景模式下的该图片元素的第一页面样式信息。

进一步地，下面对如何根据第一背景模式下页面元素对应的第一页面样式信息，确定在第二背景模式下该页面元素对应的第二页面样式信息的过程进行说明，这里，对于页面元素类型的不同，确定第二背景模式下该页面元素对应的第二页面样式信息所采用的方式有所不同，这里，先对页面元素为文本元素的情况进行阐述：

若所述页面元素为文本元素，所述第一页面样式信息为颜色样式信息；步骤S102中所述基于所述第一背景模式下所述页面元素对应的第一页面样式信息，确定在所述第二背景模式下所述页面元素对应的第二页面样式信息，包括以下步骤：

步骤a1：查询预设的颜色样式映射表中是否存在所述第一背景模式下的所述文本元素的第一颜色。

在具体实施中，若要进行页面样式转变的页面元素为文本元素，且该页面元素的第一页面样式信息为颜色样式信息，可以先查询预设的颜色样式映射表中是否存在第一背景模式下的该页面元素的第一颜色，即，确定颜色样式映射表中是否存在第一背景模式下关联的第一颜色。

这里，颜色样式映射表中存储有第一背景模式对应的颜色，以及第二背景模式对应的颜色，且，第一背景模式对应的一种颜色，与第二背景模式对应的一种颜色相关联存储。

步骤a2：若存在，从所述颜色样式映射表中，查询与在所述第一背景模式下的所述第一颜色对应的在所述第二背景模式下的第二颜色。

在具体实施中，若颜色样式映射表中存在第一背景模式下的第一颜色，则从颜色样式映射表中进一步查找与第一背景模式的第一颜色对应的在第二背景模式下的第二颜色，即，找到该页面元素在切换背景模式后的第二颜色，即，确定出第二背景模式下该页面元素对应的第二颜色。

步骤a3：将所述第二颜色确定为在所述第二背景模式下所述页面元素对应的第二页面样式信息。

在具体实施中，在确定出目标页面中各页面元素在第二背景模式下的第二颜色后，按照每个页面元素对应的第二颜色进行该页面元素的显示。这样，可以实现在背景模式切换时，目标页面的页面元素的页面样式与暗黑模式的适配。

进一步地，如果从颜色样式映射表中没有查询到第一背景模式下的第一颜色，则可以选取与第一颜色相近似的颜色映射表中第三颜色，并将第三颜色作为该页面元素在第一背景模式下的颜色，具体地，在步骤a1查询预设的颜色样式映射表中是否存在所述第一背景模式下的所述文本元素的第一颜色之后，还包括以下步骤：

若不存在，确定所述颜色样式映射表中在所述第一背景模式下与所述第一颜色相近似的第三颜色；从所述颜色样式映射表中，查询与在所述第一背景模式下的所述第三颜色对应的在所述第二背景模式下的所述第二颜色；将所述第二颜色确定为在所述第二背景模式下所述页面元素对应的第二页面样式信息。

在具体实施中，若从颜色样式映射表中没有查询到第一背景模式下的第一颜色，则可以从颜色映射表中选取与第一颜色相近似的第三颜色，并将第三颜色作为该页面元素在第一背景模式下的颜色，进而，从颜色映射表中查询在第一背景模式下的第三颜色关联存储的第二背景模式下的第二颜色，并在背景模式切换至第二背景模式时，将第二颜色的页面元素进行显示，以实现在背景模式切换时，目标页面的页面元素的页面样式与暗黑模式的适配。

需要说明的是，在获取到目标页面中每个页面元素的第一页面样式信息后，如果没有在颜色映射表中找到第一背景模式下的第一颜色，可以使用近似色方案，根据适配规范查找第一颜色相近的第三颜色，进而，根据第一背景模式下的第三颜色，在颜色映射表中查找到与第三颜色关联存储的第二背景模式下的第二颜色，进而，生成该页面元素在第二背景模式下的第二页面样式信息。这里，与第一颜色相近的第三颜色，可以是颜色值与第一颜色的颜色值相近的颜色。

这里，由于界面设计(User Interface Design，UI)给出的颜色规范不能覆盖所有的色值，所以需要通过近似色方案将没有被覆盖的颜色转换为UI所要求的颜色。

一示例中，假设目标页面中有个页面元素的背景色为粉色#ffc0cb，暗黑模式颜色规范中并没有这个颜色，但在规范中找到了一个红色#ffabab和这个粉色最接近，这个红色即为粉色的近似色，那么粉色在暗黑模式下的色值就等于该红色在暗黑模式下色值#802a2a。

进一步地，每个页面元素至少有一种状态，页面元素的状态可以发生变化，比如，一个页面元素为按钮，在点击后，变化为另一种页面样式的该页面元素，如果在由第一背景模式切换至第二背景模式的过程中，该页面元素的状态也发生了变化，需要获取该页面元素变化状态后的第三页面样式信息，进而，在切换至第二背景模式后，显示该页面元素在第二背景模式下的与第一背景模式下对应的第三页面元素相对应的第四页面样式信息，具体地，在步骤S101中所述获取在所述第一背景模式下目标页面中页面元素对应的第一页面样式信息之后，还包括以下步骤：

步骤b1：监听所述页面元素对应的第一页面样式信息是否发生变更。

在具体实施中，在获取到第一背景模式下目标页面中页面元素对应的第一页面样式信息之后，先监听该页面元素对应的第一页面样式信息是否发生变更。

这里，可以采用变异者观察(MutationObserver)的应用程序接口(ApplicationProgramming Interface，API)对文档对象模型(HTML Document Object Model，HTML DOM)进行监听，当被监听的页面元素的页面样式发生改变后，获取最新的页面样式。其中，HTMLDOM则是专门适用于HTML/XHTML的文档对象模型，可以将HTML DOM理解为网页的API，它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑。

步骤b2：若是，获取变更后的所述页面元素对应的第三页面样式信息，并基于所述第一背景模式下所述页面元素对应的第三页面样式信息，确定在所述第二背景模式下所述页面元素对应的第四页面样式信息。

在具体实施中，若监听到任一页面元素对应的第一页面样式信息发生了变更，则获取变更后的该页面元素对应的第三页面样式信息，并基于第一背景模式下该页面元素对应的第三页面样式信息，确定在第二背景模式下该页面元素对应的第四页面样式信息。

步骤b3：按照所述页面元素对应的第四页面样式信息，重新加载所述目标页面的所述页面元素。

在具体实施中，在获取到变更后的在异地背景模式下的页面元素的第三页面样式信息后，可以确定出与第一背景模式下第三页面样式信息对应的第二背景模式下的第四页面样式信息，进而，按照该页面元素对应的第四页面样式信息，重新加载目页面的该页面元素，并以第四页面样式对该页面元素进行显示。

这里，对于页面元素为图片元素，确定第二背景模式下页面元素对应的第二页面样式信息的确定过程进行阐述，具体地，步骤S102中基于所述第一背景模式下所述页面元素对应的第一页面样式信息，确定在所述第二背景模式下所述页面元素对应的第二页面样式信息，包括以下步骤：

步骤c1：根据所述第一背景模式和所述第一图片链接信息，确定在所述第二背景模式下的所述图片元素对应的第二图片链接信息。

在具体实施中，对于页面元素为图片元素，第一页面样式信息为第一图片链接信息的情况，根据该页面元素的第一背景模式和第一图片链接信息，可以确定在第二背景模式下的该图片元素的第二图片链接信息。这里，第一背景模式下的第一图片链接和第二背景模式下的第二图片链接存在一一对应关系，每个图片链接与一个图片相关联，即，通过图片链接可以找到与该图片链接关联的图片，可以将第一背景模式对应的图片存储在一个区域，将第二背景模式对应的图片存储在另一个区域。

一示例中，一个图片元素在第一背景模式下的第一图片链接为http://xxxx/a.png，该图片元素在第二背景模式下的第二图片链接为http://xxxx/darkmode/a.png，这样，UI只需要将背景模式下的图片上传为转换后的地址即可，可以避免对业务代码的改动。

步骤c2：将所述第二图片链接信息确定为在所述第二背景模式下的所述页面元素对应的第二页面样式信息。

在具体实施中，在确定出该页面元素在第二背景模式下的第二图片链接后，可以在转换为第二背景模式时，将第二图片链接对应的图片进行显示。

S103：按照所述页面元素对应的第二页面样式信息，重新加载所述目标页面的所述页面元素。

在该步骤中，在确定出在第二背景模式下页面元素的第二页面样式信息后，重新加载目标页面的页面元素，并以第二页面样式对页面元素进行显示。

需要说明的是，由于旧有的H5页面数量较多，为了降低适配成本，所以直接通过计算机函数native给网页视图(webview)注入一段JavaScript代码来进行自动转换，注入的代码将会对所有的颜色值做转换，无需业务方改动代码。其中，颜色的转换需要遵循UI给出的具体的规范，规范中会有某个颜色在背景模式下应该显示成什么色值。本公开可以在不需要改写代码的情况下实现颜色和图片自动适配转变后的背景模式，比如暗黑模式，对于新旧页面都能有符合UI规范的转换效果，高效且简单。

在本公开实施例中，响应由第一背景模式切换至第二背景模式的操作，获取在第一背景模式下目标页面中页面元素对应的第一页面样式信息，进而，基于第一背景模式下页面元素对应的第一页面样式信息，确定在第二背景模式下页面元素对应的第二页面样式信息，按照页面元素对应的第二页面样式信息，重新加载目标页面的页面元素。通过生成模式切换后的页面元素的页面样式信息，可以在满足页面元素的页面样式与暗黑模式的适配效果的同时，提升适配效率。

本领域技术人员可以理解，在具体实施方式的上述方法中，各步骤的撰写顺序并不意味着严格的执行顺序而对实施过程构成任何限定，各步骤的具体执行顺序应当以其功能和可能的内在逻辑确定。

基于同一发明构思，本公开实施例中还提供了与页面样式切换方法对应的页面样式切换装置，由于本公开实施例中的装置解决问题的原理与本公开实施例上述页面样式切换方法相似，因此装置的实施可以参见方法的实施，重复之处不再赘述。

实施例二

图2示出了本公开实施例所提供的一种页面样式切换装置200的示意图之一；图3示出了本公开实施例所提供的一种页面样式切换装置200的示意图之二；图4示出了本公开实施例所提供的页面样式切换装置200中，确定模块220的具体示意图。

如图2所示，所述页面样式切换装置200包括：

获取模块210，用于响应由第一背景模式切换至第二背景模式的操作，获取在所述第一背景模式下目标页面中页面元素对应的第一页面样式信息；

确定模块220，用于基于所述第一背景模式下所述页面元素对应的第一页面样式信息，确定在所述第二背景模式下所述页面元素对应的第二页面样式信息；

加载模块230，用于按照所述页面元素对应的第二页面样式信息，重新加载所述目标页面的所述页面元素。

在一种可能的实施方式中，如图2所示，若所述页面元素为文本元素，所述第一页面样式信息为颜色样式信息；所述确定模块220，用于根据以下步骤确定在所述第二背景模式下所述页面元素对应的第二页面样式信息：

查询预设的颜色样式映射表中是否存在所述第一背景模式下的所述文本元素的第一颜色；

若存在，从所述颜色样式映射表中，查询与在所述第一背景模式下的所述第一颜色对应的在所述第二背景模式下的第二颜色；

将所述第二颜色确定为在所述第二背景模式下所述页面元素对应的第二页面样式信息。

在一种可能的实施方式中，如图2所示，所述确定模块220，还用于：

若不存在，确定所述颜色样式映射表中在所述第一背景模式下与所述第一颜色相近似的第三颜色；

从所述颜色样式映射表中，查询与在所述第一背景模式下的所述第三颜色对应的在所述第二背景模式下的所述第二颜色；

将所述第二颜色确定为在所述第二背景模式下所述页面元素对应的第二页面样式信息。

在一种可能的实施方式中，如图3所示，所述页面样式切换装置200还包括监听模块240；所述监听模块240用于：

监听所述页面元素对应的第一页面样式信息是否发生变更；

若是，获取变更后的所述页面元素对应的第三页面样式信息，并基于所述第一背景模式下所述页面元素对应的第三页面样式信息，确定在所述第二背景模式下所述页面元素对应的第四页面样式信息；

按照所述页面元素对应的第四页面样式信息，重新加载所述目标页面的所述页面元素。

在一种可能的实施方式中，如图3所示，所述页面样式切换装置200还包括监听模块240；所述监听模块240用于：

监听所述页面元素对应的第一页面样式信息是否发生变更；

若是，获取变更后的所述页面元素对应的第三页面样式信息，并基于所述第一背景模式下所述页面元素对应的第三页面样式信息，确定在所述第二背景模式下所述页面元素对应的第四页面样式信息；

按照所述页面元素对应的第四页面样式信息，重新加载所述目标页面的所述页面元素。

在一种可能的实施方式中，如图4所示，若所述页面元素为图片元素，所述第一页面样式信息为第一图片链接信息；确定模块220包括：

第一确定单元221，用于根据所述第一背景模式和所述第一图片链接信息，确定在所述第二背景模式下的所述图片元素对应的第二图片链接信息；

第二确定单元222，用于将所述第二图片链接信息确定为在所述第二背景模式下的所述页面元素对应的第二页面样式信息。

在一种可能的实施方式中，如图2所示，所述获取模块210，用于若所述页面元素为文本元素，通过以下方式获取在所述第一背景模式下目标页面中页面元素对应的第一页面样式信息：

嵌入样式标签方式、外部样式标签方式、内联样式标签方式。

在一种可能的实施方式中，页面样式信息包括以下信息中的至少一种：

文字颜色显示信息、背景颜色显示信息、边框颜色显示信息、炫富状态的颜色显示信息、点击状态的颜色显示信息、图片链接信息。

在本公开的实施例中，响应由第一背景模式切换至第二背景模式的操作，获取在第一背景模式下目标页面中页面元素对应的第一页面样式信息，进而，基于第一背景模式下页面元素对应的第一页面样式信息，确定在第二背景模式下页面元素对应的第二页面样式信息，按照页面元素对应的第二页面样式信息，重新加载目标页面的页面元素。通过生成模式切换后的页面元素的页面样式信息，可以在满足页面元素的页面样式与暗黑模式的适配效果的同时，提升适配效率。

关于装置中的各模块的处理流程、以及各模块之间的交互流程的描述可以参照上述方法实施例中的相关说明，这里不再详述。

实施例三

基于同一技术构思，本公开实施例还提供了一种计算机设备。参照图5所示，为本公开实施例提供的计算机设备500的结构示意图，包括处理器501、存储器502、和总线503。其中，存储器502用于存储执行指令，包括内存5021和外部存储器5022；这里的内存5021也称内存储器，用于暂时存放处理器501中的运算数据，以及与硬盘等外部存储器5022交换的数据，处理器501通过内存5021与外部存储器5022进行数据交换，当计算机设备500运行时，处理器501与存储器502之间通过总线503通信，使得处理器501在执行以下指令：

响应由第一背景模式切换至第二背景模式的操作，获取在所述第一背景模式下目标页面中页面元素对应的第一页面样式信息；

基于所述第一背景模式下所述页面元素对应的第一页面样式信息，确定在所述第二背景模式下所述页面元素对应的第二页面样式信息；

按照所述页面元素对应的第二页面样式信息，重新加载所述目标页面的所述页面元素。

实施例四

本公开实施例还提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器运行时执行上述方法实施例中所述的页面样式切换方法的步骤。其中，该存储介质可以是易失性或非易失的计算机可读取存储介质。

本公开实施例所提供的页面样式切换方法的计算机程序产品，包括存储了程序代码的计算机可读存储介质，所述程序代码包括的指令可用于执行上述方法实施例中所述的页面样式切换方法的步骤，具体可参见上述方法实施例，在此不再赘述。

本公开实施例还提供一种计算机程序，该计算机程序被处理器执行时实现前述实施例的任意一种方法。该计算机程序产品可以具体通过硬件、软件或其结合的方式实现。在一个可选实施例中，所述计算机程序产品具体体现为计算机存储介质，在另一个可选实施例中，计算机程序产品具体体现为软件产品，例如软件开发包(Software DevelopmentKit，SDK)等等。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统和装置的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。在本公开所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个处理器可执行的非易失的计算机可读取存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-OnlyMemory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上所述实施例，仅为本公开的具体实施方式，用以说明本公开的技术方案，而非对其限制，本公开的保护范围并不局限于此，尽管参照前述实施例对本公开进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本公开揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本公开实施例技术方案的精神和范围，都应涵盖在本公开的保护范围之内。因此，本公开的保护范围应所述以权利要求的保护范围为准。

Claims (10)

1.一种页面样式切换方法，其特征在于，所述方法包括：

响应由第一背景模式切换至第二背景模式的操作，获取在所述第一背景模式下目标页面中页面元素对应的第一页面样式信息；

基于所述第一背景模式下所述页面元素对应的第一页面样式信息，确定在所述第二背景模式下所述页面元素对应的第二页面样式信息；

按照所述页面元素对应的第二页面样式信息，重新加载所述目标页面的所述页面元素。

2.根据权利要求1所述的页面样式切换方法，其特征在于，若所述页面元素为文本元素，所述第一页面样式信息为颜色样式信息；所述基于所述第一背景模式下所述页面元素对应的第一页面样式信息，确定在所述第二背景模式下所述页面元素对应的第二页面样式信息，包括：

查询预设的颜色样式映射表中是否存在所述第一背景模式下的所述文本元素的第一颜色；

若存在，从所述颜色样式映射表中，查询与在所述第一背景模式下的所述第一颜色对应的在所述第二背景模式下的第二颜色；

将所述第二颜色确定为在所述第二背景模式下所述页面元素对应的第二页面样式信息。

3.根据权利要求2所述的页面样式切换方法，其特征在于，所述页面样式切换方法还包括：

若不存在，确定所述颜色样式映射表中在所述第一背景模式下与所述第一颜色相近似的第三颜色；

从所述颜色样式映射表中，查询与在所述第一背景模式下的所述第三颜色对应的在所述第二背景模式下的所述第二颜色；

将所述第二颜色确定为在所述第二背景模式下所述页面元素对应的第二页面样式信息。

4.根据权利要求1所述的页面样式切换方法，其特征在于，在所述获取在所述第一背景模式下目标页面中页面元素对应的第一页面样式信息之后，所述页面样式切换方法还包括：

监听所述页面元素对应的第一页面样式信息是否发生变更；

若是，获取变更后的所述页面元素对应的第三页面样式信息，并基于所述第一背景模式下所述页面元素对应的第三页面样式信息，确定在所述第二背景模式下所述页面元素对应的第四页面样式信息；

按照所述页面元素对应的第四页面样式信息，重新加载所述目标页面的所述页面元素。

5.根据权利要求1所述的页面样式切换方法，其特征在于，若所述页面元素为图片元素，所述第一页面样式信息为第一图片链接信息；所述基于所述第一背景模式下所述页面元素对应的第一页面样式信息，确定在所述第二背景模式下所述页面元素对应的第二页面样式信息，包括：

根据所述第一背景模式和所述第一图片链接信息，确定在所述第二背景模式下的所述图片元素对应的第二图片链接信息；

将所述第二图片链接信息确定为在所述第二背景模式下的所述页面元素对应的第二页面样式信息。

6.根据权利要求1所述的页面样式切换方法，其特征在于，若所述页面元素为文本元素，通过以下方式获取在所述第一背景模式下目标页面中页面元素对应的第一页面样式信息：

嵌入样式标签方式、外部样式标签方式、内联样式标签方式。

7.根据权利要求1所述的页面样式切换方法，其特征在于，页面样式信息包括以下信息中的至少一种：

文字颜色显示信息、背景颜色显示信息、边框颜色显示信息、炫富状态的颜色显示信息、点击状态的颜色显示信息、图片链接信息。

8.一种页面样式切换装置，其特征在于，所述装置包括：

获取模块，用于响应由第一背景模式切换至第二背景模式的操作，获取在所述第一背景模式下目标页面中页面元素对应的第一页面样式信息；

确定模块，用于基于所述第一背景模式下所述页面元素对应的第一页面样式信息，确定在所述第二背景模式下所述页面元素对应的第二页面样式信息；

加载模块，用于按照所述页面元素对应的第二页面样式信息，重新加载所述目标页面的所述页面元素。

9.一种计算机设备，其特征在于，包括：处理器、存储器和总线，所述存储器存储有所述处理器可执行的机器可读指令，当计算机设备运行时，所述处理器与所述存储器之间通过总线通信，所述机器可读指令被所述处理器执行时执行如权利要求1至7任一所述的页面样式切换方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如权利要求1至7任一所述的页面样式切换方法的步骤。

Images