CN116719456A - 图标样式切换方法、装置、电子设备及存储介质 - Google Patents

Abstract

本公开提供了一种图标样式切换方法、装置、电子设备及存储介质，涉及人工智能领域，具体涉及云计算、低代码、企业应用技术，可应用在软件开发场景下。具体实现方案为：在用户界面内显示目标组件中图标文档对象模型元素的初始图标样式；在满足触发条件时，获取图标文档对象模型元素的待更新描述信息，其中，触发条件用于确定是否对初始图标样式进行更新，待更新描述信息用于描述在目标主题中为图标文档对象模型元素选定的目标图标样式；基于待更新描述信息将初始图标样式切换显示为目标图标样式。

Description

图标样式切换方法、装置、电子设备及存储介质

技术领域

本公开涉及人工智能领域，具体涉及云计算、低代码、企业应用技术，可应用在软件开发场景下，尤其涉及一种图标样式切换方法、装置、电子设备及存储介质。

背景技术

主题配置是目前组件库所具备的常用功能，通过执行主题配置操作能够满足用户的个性化配置需求，然而组件库所提供的主题配置功能仅仅可以改变组件的颜色、宽和高等样式，无法修改组件的文档对象模型(Document Object Model，DOM)元素。相关技术中为了实现用户自定义DOM元素，需要在组件相应代码中自定义DOM元素，并通过插槽对原有的DOM元素进行替换，然而通过插槽实现只能针对单独的组件生效，却无法对所有组件的默认形态都生效，从而导致配置灵活性差。

发明内容

本公开提供了一种图标样式切换方法、装置、电子设备及存储介质，至少解决相关技术中自定义文档对象模型元素时的配置效率低、灵活性差的技术问题。

根据本公开的一方面，提供了一种图标样式切换方法，包括：在用户界面内显示目标组件中图标文档对象模型元素的初始图标样式；在满足触发条件时，获取图标文档对象模型元素的待更新描述信息，其中，触发条件用于确定是否对初始图标样式进行更新，待更新描述信息用于描述在目标主题中为图标文档对象模型元素选定的目标图标样式；基于待更新描述信息将初始图标样式切换显示为目标图标样式。

根据本公开的另一方面，提供了一种图标样式切换装置，包括：显示模块，用于在用户界面内显示目标组件中图标文档对象模型元素的初始图标样式；获取模块，用于在满足触发条件时，获取图标文档对象模型元素的待更新描述信息，其中，触发条件用于确定是否对初始图标样式进行更新，待更新描述信息用于描述在目标主题中为图标文档对象模型元素选定的目标图标样式；切换模块，用于基于待更新描述信息将初始图标样式切换显示为目标图标样式。

根据本公开的又一方面，提供了一种电子设备，包括：至少一个处理器；以及与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够执行本公开提出的图标样式切换方法。

根据本公开的又一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，计算机指令用于使计算机执行本公开提出的图标样式切换方法。

根据本公开的又一方面，提供了一种计算机程序产品，包括计算机程序，计算机程序在被处理器执行本公开提出的图标样式切换方法。

在本公开中，通过在用户界面内显示目标组件中图标文档对象模型元素的初始图标样式，进而在满足触发条件时，获取图标文档对象模型元素的待更新描述信息，最后基于待更新描述信息将初始图标样式切换显示为目标图标样式，达到了灵活自定义文档对象模型元素的目的，实现了提升对于文档对象模型元素的配置效率的效果，从而解决了相关技术中自定义文档对象模型元素时的配置效率低、灵活性差的技术问题。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图用于更好地理解本方案，不构成对本公开的限定。其中：

图1为一种输入框组件初始图标样式的示意图；

图2是根据本公开实施例的一种图标样式切换方法流程图；

图3是根据本公开实施例的一种图标选择界面示意图；

图4为一种输入框组件目标图标样式的示意图；

图5是根据本公开实施例的一种图标样式切换方法的示意图；

图6是根据本公开实施例的一种图标样式切换装置的结构框图；

图7是根据本公开实施例的一种用来实施图标样式切换方法的电子设备框图。

具体实施方式

以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

DOM元素具体可以包括块状元素(div)、图片元素(img)以及按钮元素(button)等，例如图1为一种输入框组件初始图标样式的示意图，如图1所示，输入框的清除按钮就是一个图标(icon)，在开发组件时需要写在代码中，代码形如<div class＝”input-text”><Icon icon＝”close”/></div>，该代码可以表示在一个块状元素中包裹一个关闭图标，对该关闭图标的修改不属于样式的修改。

相关技术中，组件库使用插槽方式实现用户对于DOM元素的自定义。具体的，用户需要在组件的相应代码中自定义DOM元素，并通过插槽替换掉对应的DOM元素。通过插槽的功能，用户在使用组件时可以通过代码将图标插入对应位置，实现图标的替换。但是插槽只能对每次引入的组件进行自定义配置使用，无法对组件的默认形态进行控制。

具体的，通过插槽实现只能针对单独的组件生效，如果用户又引入新的一个组件，这个新引入的这个组件还会保持原样，即插槽实现的DOM元素修改无法对所有组件都生效。例如，将一个输入组件(Input)引入代码后默认为<Input></Input>，使用插槽方式对代码进行修改，修改后的代码为<Input><div slot＝”icon”>图标</div></Input>，这样以来就在名为icon的地方插入了一个div元素，内容是“图标”，但是其他地方引入该输入组件的时候，默认代码还是<Input></Input>，还是保持输入组件的默认形态。因此，采用插槽方式自定义DOM元素时，仅能针对单独的组件生效，而无法对所有的组件生效。

综上可知，相关技术中存在自定义文档对象模型元素时的配置效率低、灵活性差的技术问题，针对上述的问题，目前尚未提出有效的解决方案。

图2是根据本公开实施例的一种图标样式切换方法流程图。如图2所示，该方法可以包括如下步骤：

步骤S22，在用户界面内显示目标组件中图标文档对象模型元素的初始图标样式；

步骤S24，在满足触发条件时，获取图标文档对象模型元素的待更新描述信息，其中，触发条件用于确定是否对初始图标样式进行更新，待更新描述信息用于描述在目标主题中为图标文档对象模型元素选定的目标图标样式；

步骤S26，基于待更新描述信息将初始图标样式切换显示为目标图标样式。

上述目标组件可以为用户界面(User Interface，UI)内的基础组件、方向组件、操作组件以及提示组件等，其中，基础组件可以用于在用户界面内执行服务管理、图层管理、下载管理以及样式管理等管理功能，方向组件可以用于在用户界面内设置一键收起以及方向指引功能，操作组件可以用于在用户界面内执行播放操作、点赞操作、标记操作等操作功能，上述提示组件可以用于在用户界面内执行信息提示功能。

需要说明的是，上述用户界面内显示的目标组件可以根据用户页面设计需求进行灵活设置，本公开实施例中对于目标组件的类别、数量以及位置不予限制。

上述图标文档对象模型元素可以为图标DOM元素，文档对象模型为网页的编程接口，负责操作元素内容、操作元素属性、操作表单属性、操作元素类名。上述初始图标样式为切换前的图标样式，目标图标样式为切换后的图标样式。在满足触发条件时，获取图标DOM元素的待更新描述信息，该待更新描述信息可以为目标主题(React)中图标DOM元素选定的图标切换结果，React用于构建用户界面的JavaScript库，其可以将一些独立的代码片段“组件”组合成复杂的UI界面，从而对软件的人机交互、操作逻辑和界面美观进行整体设计。

基于上述步骤S22至步骤S26，通过在用户界面内显示目标组件中图标文档对象模型元素的初始图标样式，进而在满足触发条件时，获取图标文档对象模型元素的待更新描述信息，最后基于待更新描述信息将初始图标样式切换显示为目标图标样式，达到了灵活自定义文档对象模型元素的目的，实现了提升对于文档对象模型元素的配置效率的效果，从而解决了相关技术中自定义文档对象模型元素时的配置效率低、灵活性差的技术问题。

可选地，本公开实施例中的图标样式切换方法具体涉及云计算、低代码、企业应用技术，可应用在软件开发场景下，例如，本公开实施例中的目标组件可以在低代码平台发布使用，低代码平台可以是React平台。

下面对上述实施例中的图标样式切换方法进行进一步介绍。

作为一种可选的实施方式，本公开实施例中的图标样式切换方法还包括：

步骤S201，为目标组件定义类名；

步骤S202，在层叠样式表中设置类名对应的内容属性；

步骤S203，将内容属性的层叠样式表变量值设置为第一字符串，得到初始图标样式，其中，第一字符串为生成初始图标样式的可缩放的矢量图形字符串。

具体的，为目标组件定义类名(className)，进而在层叠样式表(Cascading StyleSheet，CSS)中设置上述className对应的内容(content)属性。其中，CSS是一种用来表现超文本标记语言(Hyper Text Markup Language，HTML)或可扩展标记语言(ExtensibleMarkup Language，XML)等文件样式的计算机语言，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制、支持不同的字体字号样式，并拥有对网页对象和模型样式编辑的能力。

上述content属性是一个CSS变量，CSS中具有前/后(before/after)伪元素，在before/after伪元素选择器中有一个content属性，能够实现页面内容的插入，即该content属性用于定义元素之前或之后插入生成的内容，包括：纯文字、文字符号、图片、元素的属性值等。上述content属性的CSS变量值为初始图标样式对应的可缩放的矢量图形字符串(Scalable Vector Graphics，SVG)字符串，利用该SVG字符串能够生成初始图标样式，

基于上述可选实施方式，通过为目标组件定义类名，进而在层叠样式表中设置类名对应的内容属性，最后将内容属性的层叠样式表变量值设置为第一字符串，能够快速得到用于显示在用户界面上的初始图标样式。

作为一种可选的实施方式，在步骤S24，在满足触发条件时，获取图标文档对象模型元素的待更新描述信息包括：在满足触发条件时，获取图标文档对象模型元素的第二字符串，其中，第二字符串为生成目标图标样式的可缩放的矢量图形字符串。

具体的，在用户选择相应目标图标时，可以触发更新机制，从而获取目标图标样式对应的SVG文件，该SVG文件可以为目标图标样式对应的SVG字符串，利用所获得的SVG字符串能够快速生成目标图标样式。

基于上述可选实施方式，通过在满足触发条件时，获取图标文档对象模型元素的第二字符串，从而能够快速生成目标图标样式，进一步提升图标切换效率。

作为一种可选的实施方式，获取图标文档对象模型元素的第二字符串包括：

步骤S241，采用第一获取方法获取目标图标样式的样式标识，其中，第一获取方法用于获取图标文档对象模型元素待展示的图标样式；

步骤S242，采用样式标识关联的第二获取方法获取图标文档对象模型元素的第二字符串，其中，第二获取方法用于获取图标文档对象模型元素样式的属性值。

具体的，采用第一获取方法获取目标图标样式的样式标识时，具体可以采用window全局对象的方法，如利用getComputedStyle方法获取DOM元素实际显示时的样式(Style)，其中，getComputedStyle方法可以传递两个参数，第一个参数指定一个用来获取计算样式的DOM元素，第二个参数为可选参数，能够指定一个要匹配的伪元素的字符串，普通元素可省略或传递空值(null)。

进一步的，采用样式标识关联的第二获取方法获取图标DOM元素的SVG字符串时，具体可以采用style.getPropertyValue方法获取图标DOM元素样式的属性值。

基于上述可选实施方式，通过采用第一获取方法获取目标图标样式的样式标识，进而采用样式标识关联的第二获取方法能够快速获取图标文档对象模型元素的第二字符串，从而利用第二字符串快速生成目标图标样式。

作为一种可选的实施方式，在步骤S26，基于待更新描述信息将初始图标样式切换显示为目标图标样式包括：

步骤S261，基于待更新描述信息确定第二字符串的数据格式和数据内容；

步骤S262，响应于第一字符串的数据格式等同于第二字符串的数据格式且第一字符串的数据内容不同于第二字符串的数据内容，采用第二字符串覆盖第一字符串，得到处理结果；

步骤S263，基于处理结果，将初始图标样式切换显示为目标图标样式。

具体的，基于待更新描述信息确定第二字符串的数据格式和数据内容，进一步当第一字符串和第二字符串的数据格式均为SVG格式，并且第一字符串对应的SVG值与第二字符串对应的SVG值不同时，可以确定需要切换的初始图标样式与目标图标样式不同，因此采用第二字符串覆盖第一字符串，得到处理结果，从而基于处理结果，将初始图标样式切换显示为目标图标样式。

基于上述可选实施方式，通过基于待更新描述信息确定第二字符串的数据格式和数据内容，进而响应于第一字符串的数据格式等同于第二字符串的数据格式且第一字符串的数据内容不同于第二字符串的数据内容，采用第二字符串覆盖第一字符串，得到处理结果，最后基于处理结果，将初始图标样式切换显示为目标图标样式，不仅能够对单个组件的图标样式进行调整，还能够对所有组件的默认形态都生效，从而简化了组件图标样式的配置难度，提升了文档对象模型元素时的配置效率。

作为一种可选的实施方式，在步骤S263，基于处理结果，将初始图标样式切换显示为目标图标样式包括：采用处理结果对图标文档对象模型元素的页面显示子元素进行赋值，将初始图标样式切换显示为目标图标样式，其中，页面显示子元素用于改变图标文档对象模型元素的页面内容、结构和样式。

具体的，上述页面显示子元素用于改变图标DOM元素的页面内容、结构和样式，页面显示子元素可以为dom.interHTML，可用于设置或获取位于对象起始和结束标签内的HTML。

作为一种可选的实施方式，通过终端设备提供一图形用户界面，图形用户界面所显示的内容至少部分地包含一图标样式切换场景，本公开实施例中的图标样式切换方法还包括：

步骤S264，响应作用于图形用户界面的第一触控操作，从目标主题下提供的多个候选图标样式中选取目标图标样式；

步骤S265，响应作用于图形用户界面的第二触控操作，采用第二字符串覆盖第一字符串，将初始图标样式切换显示为目标图标样式。

具体的，终端设备上的图形用户界面(Graphical User Interface，GUI)所显示的内容至少部分地包含一图标样式切换场景，在图标样式切换场景下可以提供一批组件图标供用户选择，并可以对组件的各项属性进行配置。当用户选择相应的图标时，获取该图标的SVG字符串，然后获取图标的content属性使用的变量名，将该变量名对应的变量设置为选择的图标的SVG值，该变量值会将原先的SVG值覆盖掉，最后触发组件更新，即可显示图标切换后的结果。

上述图形用户界面还包括第一控件(或第一触控区域)，当检测到作用于第一控件(或第一触控区域)的第一触控操作时，从目标主题下提供的多个候选图标样式中选取目标图标样式。上述第一触控操作可以是点选、框选、勾选、条件筛选等选择操作。

上述图形用户界面还包括第二控件(或第二触控区域)，当检测到作用于第二控件(或第二触控区域)的第二触控操作时，采用第二字符串覆盖第一字符串，将初始图标样式切换显示为目标图标样式。上述第二触控操作可以是点选、框选、勾选等确认操作。

需要说明的是，上述第一触控操作、上述第二触控操作均可以是用户用手指接触上述终端设备的显示屏并触控该终端设备的操作。该触控操作可以包括单点触控、多点触控，其中，每个触控点的触控操作可以包括点击、长按、重按、划动等。上述第一触控操作、上述第二触控操作还可以是通过鼠标、键盘等输入设备实现的触控操作。

本公开实施例中能够在组件和平台两个方面，使用React的引用(Reference，ref)函数结合CSS变量实现图标样式切换。

具体的，在组件方面，定义一个类名，在CSS中给该类名设置content属性，content属性是一个CSS变量，而CSS变量的值是默认图标的SVG字符串。然后定义一个ref函数，ref函数会在DOM挂载或更新时触发，它的作用是从CSS中获取content属性的属性值。ref函数可以对content属性进行处理，例如，ref函数可以对于获取到的SVG字符串，修改格式，使其符合DOM元素展示的要求；ref函数可以判定SVG图标是否有更新；ref函数还可以处理传入SVG为空字符的情况。

如果该属性值是SVG格式，并且和当前的SVG值不一致，则会基于该获取到的SVG生成DOM，将该SVG设置成为div元素的innerHTML，即可给该div元素插入一个页面显示子元素，从而展示到页面上，即可展示该获取到的SVG。

在平台方面，可以提供一批组件图标供用户选择，并可以对组件图标的各项属性进行配置。当用户选择相应的图标时，获取该图标的SVG字符串，然后获取图标的content属性使用的变量名，将该变量名对应的变量设置为选择的图标的SVG值，该变量值会将原先的SVG值覆盖掉，最后触发组件更新，即可显示图标切换后的结果。

具体流程以图1所示输入框图标为例，首先定义图标dom为<div className＝”input-icon”ref＝{refFn}></div>，从而实现在CSS中定义样式。

进一步设置.input-icon{content:var(--input-icon-svg)；}，这样的含义是使用CSS变量--input-icon-svg作为content的值，refFn是在组件挂载或更新时执行的方法，这个方法的作用是在页面上展示组件的时候获取图标的SVG并对其展示。

随后在平台中通过图标选择器选中对应的图标，图3是根据本公开实施例的一种图标选择界面示意图，如图3所示，选择表情样式图标后点击确认，即可触发更新机制，将CSS变量--input-icon-svg的值设置为表情样式图标的SVG。

由于触发了组件的更新机制，因此需要执行组件的refFn函数，在refFn函数中，通过getComputedStyle(dom)获取到DOM的样式style，然后通过style.getPropertyValue(‘content’)获取到content属性的值，然后给dom.interHTML赋值，即可将表情样式图标的SVG作为页面显示子元素展示出来，对图1中的输入框图标进行切换后的结果如图4所示。

图5是根据本公开实施例的一种图标样式切换方法的示意图，如图5所示，在平台中通过图标选择器选中数据库中对应的目标图标样式，定义一个类名，在CSS中给该类名设置content属性，content属性内容是一个CSS变量，而CSS变量的值是默认图标的SVG字符串。然后定义一个ref函数，利用ref函数从CSS中获取content属性的属性值，如果该属性值是SVG格式，并且和当前的SVG值不一致，则会基于该获取到的SVG生成DOM，并将该SVG设置成为div元素的innerHTML，即可给该div元素插入一个页面显示子元素，从而展示到页面上，即可展示该获取到的SVG。

由于相关技术中通过插槽实现只能针对单独的组件生效，却无法对所有组件的默认形态都生效，用户想通过插槽达到同样的组件样式修改效果的话，需要在每次引入组件的时候给该组件配置插槽，该方法无法实现组件图标默认形态的配置，而且本公开实施例能够通过在用户界面内显示目标组件中图标文档对象模型元素的初始图标样式，进而在满足触发条件时，获取图标文档对象模型元素的待更新描述信息，最后基于待更新描述信息将初始图标样式切换显示为目标图标样式，从而实现主题配置，在用户不满意主题还可以进行主题包切换，由此实现了现有页面组件图标的随时切换，进而显著提高了自定义文档对象模型元素的灵活性。

本公开的技术方案中，所涉及的用户个人信息的收集、存储、使用、加工、传输、提供和公开等处理，均符合相关法律法规的规定，且不违背公序良俗。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本公开各个实施例所述的方法。

在本公开中还提供了一种图标样式切换装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

图6是根据本公开实施例的一种图标样式切换装置的结构框图，如图6所示，图标样式切换装置600包括：

显示模块601，用于在用户界面内显示目标组件中图标文档对象模型元素的初始图标样式；

获取模块602，用于在满足触发条件时，获取图标文档对象模型元素的待更新描述信息，其中，触发条件用于确定是否对初始图标样式进行更新，待更新描述信息用于描述在目标主题中为图标文档对象模型元素选定的目标图标样式；

切换模块603，用于基于待更新描述信息将初始图标样式切换显示为目标图标样式。

可选地，图标样式切换装置600还包括：配置模块604，用于为目标组件定义类名，在层叠样式表中设置类名对应的内容属性，以及将内容属性的层叠样式表变量值设置为第一字符串，得到初始图标样式，其中，第一字符串为生成初始图标样式的可缩放的矢量图形字符串。

可选地，获取模块602，用于在满足触发条件时，获取图标文档对象模型元素的第二字符串，其中，第二字符串为生成目标图标样式的可缩放的矢量图形字符串。

可选地，获取模块602，用于采用第一获取方法获取目标图标样式的样式标识，其中，第一获取方法用于获取图标文档对象模型元素待展示的图标样式；以及采用样式标识关联的第二获取方法获取图标文档对象模型元素的第二字符串，其中，第二获取方法用于获取图标文档对象模型元素样式的属性值。

可选地，切换模块603，用于基于待更新描述信息确定第二字符串的数据格式和数据内容，响应于第一字符串的数据格式等同于第二字符串的数据格式且第一字符串的数据内容不同于第二字符串的数据内容，采用第二字符串覆盖第一字符串，得到处理结果，以及基于处理结果，将初始图标样式切换显示为目标图标样式。

可选地，切换模块603，用于采用处理结果对图标文档对象模型元素的页面显示子元素进行赋值，将初始图标样式切换显示为目标图标样式，其中，页面显示子元素用于改变图标文档对象模型元素的页面内容、结构和样式。

可选地，图标样式切换装置600还包括：选取模块605，用于响应作用于图形用户界面的第一触控操作，从目标主题下提供的多个候选图标样式中选取目标图标样式；处理模块606，用于响应作用于图形用户界面的第二触控操作，采用第二字符串覆盖第一字符串，将初始图标样式切换显示为目标图标样式。

需要说明的是，上述各个模块是可以通过软件或硬件来实现的，对于后者，可以通过以下方式实现，但不限于此：上述模块均位于同一处理器中；或者，上述各个模块以任意组合的形式分别位于不同的处理器中。

根据本公开的实施例，本公开还提供了一种电子设备、一种存储有计算机指令的非瞬时计算机可读存储介质和一种计算机程序产品。

本公开实施例中的电子设备，包括存储器和至少一个处理器，该存储器中存储有计算机指令，该处理器被设置为运行计算机指令以执行上述方法实施例中的步骤。

可选地，上述电子设备还可以包括传输设备以及输入输出设备，其中，该传输设备和上述处理器连接，该输入输出设备和上述处理器连接。

可选地，在本公开中，上述处理器可以被设置为通过计算机程序执行以下步骤：

S1，在用户界面内显示目标组件中图标文档对象模型元素的初始图标样式；

S2，在满足触发条件时，获取图标文档对象模型元素的待更新描述信息，其中，触发条件用于确定是否对初始图标样式进行更新，待更新描述信息用于描述在目标主题中为图标文档对象模型元素选定的目标图标样式；

S3，基于待更新描述信息将初始图标样式切换显示为目标图标样式。

可选地，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。

图7是根据本公开实施例的一种用来实施图标样式切换方法的电子设备框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图7所示，电子设备700包括计算单元701，其可以根据存储在只读存储器(ROM)702中的计算机程序或者从存储单元708加载到随机访问存储器(RAM)703中的计算机程序，来执行各种适当的动作和处理。在RAM 703中，还可存储设备700操作所需的各种程序和数据。计算单元701、ROM 702以及RAM 703通过总线704彼此相连。输入/输出(I/O)接口705也连接至总线704。

设备700中的多个部件连接至I/O接口705，包括：输入单元706，例如键盘、鼠标等；输出单元707，例如各种类型的显示器、扬声器等；存储单元708，例如磁盘、光盘等；以及通信单元709，例如网卡、调制解调器、无线通信收发机等。通信单元709允许设备700通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

计算单元701可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元701的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元701执行上文所描述的各个方法和处理，例如图标样式切换方法。例如，在一些实施例中，图标样式切换方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元708。在一些实施例中，计算机程序的部分或者全部可以经由ROM 702和/或通信单元709而被载入和/或安装到设备700上。当计算机程序加载到RAM 703并由计算单元701执行时，可以执行上文描述的图标样式切换方法的一个或多个步骤。备选地，在其他实施例中，计算单元701可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行图标样式切换方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、复杂可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，也可以为分布式系统的服务器，或者是结合了区块链的服务器。

根据本公开的实施例，还提供了一种存储有计算机指令的非瞬时计算机可读存储介质，该非瞬时计算机可读存储介质中存储有计算机指令，其中，该计算机指令被设置为运行时执行上述方法实施例中的步骤。

可选地，在本实施例中，上述非瞬时计算机可读存储介质可以被设置为存储用于执行以下步骤的计算机程序：

S1，在用户界面内显示目标组件中图标文档对象模型元素的初始图标样式；

S2，在满足触发条件时，获取图标文档对象模型元素的待更新描述信息，其中，触发条件用于确定是否对初始图标样式进行更新，待更新描述信息用于描述在目标主题中为图标文档对象模型元素选定的目标图标样式；

S3，基于待更新描述信息将初始图标样式切换显示为目标图标样式。

根据本公开的实施例，还提供了一种计算机程序产品。用于实施本公开方法实施例的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本公开保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等，均应包含在本公开保护范围之内。

Claims (17)

1.一种图标样式切换方法，包括：

在用户界面内显示目标组件中图标文档对象模型元素的初始图标样式；

在满足触发条件时，获取所述图标文档对象模型元素的待更新描述信息，其中，所述触发条件用于确定是否对所述初始图标样式进行更新，所述待更新描述信息用于描述在目标主题中为所述图标文档对象模型元素选定的目标图标样式；

基于所述待更新描述信息将所述初始图标样式切换显示为所述目标图标样式。

2.根据权利要求1所述的图标样式切换方法，其中，所述图标样式切换方法还包括：

为所述目标组件定义类名；

在层叠样式表中设置所述类名对应的内容属性；

将所述内容属性的层叠样式表变量值设置为第一字符串，得到所述初始图标样式，其中，所述第一字符串为生成所述初始图标样式的可缩放的矢量图形字符串。

3.根据权利要求2所述的图标样式切换方法，其中，在满足所述触发条件时，获取所述图标文档对象模型元素的所述待更新描述信息包括：

在满足所述触发条件时，获取所述图标文档对象模型元素的第二字符串，其中，所述第二字符串为生成所述目标图标样式的可缩放的矢量图形字符串。

4.根据权利要求3所述的图标样式切换方法，其中，获取所述图标文档对象模型元素的所述第二字符串包括：

采用第一获取方法获取所述目标图标样式的样式标识，其中，所述第一获取方法用于获取所述图标文档对象模型元素待展示的图标样式；

采用所述样式标识关联的第二获取方法获取所述图标文档对象模型元素的所述第二字符串，其中，所述第二获取方法用于获取所述图标文档对象模型元素样式的属性值。

5.根据权利要求3所述的图标样式切换方法，其中，基于所述待更新描述信息将所述初始图标样式切换显示为所述目标图标样式包括：

基于所述待更新描述信息确定所述第二字符串的数据格式和数据内容；

响应于所述第一字符串的数据格式等同于所述第二字符串的数据格式且所述第一字符串的数据内容不同于所述第二字符串的数据内容，采用所述第二字符串覆盖所述第一字符串，得到处理结果；

基于所述处理结果，将所述初始图标样式切换显示为所述目标图标样式。

6.根据权利要求5所述的图标样式切换方法，其中，基于所述处理结果，将所述初始图标样式切换显示为所述目标图标样式包括：

采用所述处理结果对所述图标文档对象模型元素的页面显示子元素进行赋值，将所述初始图标样式切换显示为所述目标图标样式，其中，所述页面显示子元素用于改变所述图标文档对象模型元素的页面内容、结构和样式。

7.根据权利要求1所述的图标样式切换方法，其特征在于，通过终端设备提供一图形用户界面，所述图形用户界面所显示的内容至少部分地包含一图标样式切换场景，所述图标样式切换方法还包括：

响应作用于所述图形用户界面的第一触控操作，从所述目标主题下提供的多个候选图标样式中选取所述目标图标样式；

响应作用于所述图形用户界面的第二触控操作，采用第二字符串覆盖第一字符串，将所述初始图标样式切换显示为所述目标图标样式。

8.一种图标样式切换装置，包括：

显示模块，用于在用户界面内显示目标组件中图标文档对象模型元素的初始图标样式；

获取模块，用于在满足触发条件时，获取所述图标文档对象模型元素的待更新描述信息，其中，所述触发条件用于确定是否对所述初始图标样式进行更新，所述待更新描述信息用于描述在目标主题中为所述图标文档对象模型元素选定的目标图标样式；

切换模块，用于基于所述待更新描述信息将所述初始图标样式切换显示为所述目标图标样式。

9.根据权利要求8所述的图标样式切换装置，其中，所述图标样式切换装置还包括：

配置模块，用于为所述目标组件定义类名，在层叠样式表中设置所述类名对应的内容属性，以及将所述内容属性的层叠样式表变量值设置为第一字符串，得到所述初始图标样式，其中，所述第一字符串为生成所述初始图标样式的可缩放的矢量图形字符串。

10.根据权利要求9所述的图标样式切换装置，其中，所述获取模块，用于在满足所述触发条件时，获取所述图标文档对象模型元素的第二字符串，其中，所述第二字符串为生成所述目标图标样式的可缩放的矢量图形字符串。

11.根据权利要求10所述的图标样式切换装置，其中，所述获取模块，用于采用第一获取方法获取所述目标图标样式的样式标识，其中，所述第一获取方法用于获取所述图标文档对象模型元素待展示的图标样式；以及采用所述样式标识关联的第二获取方法获取所述图标文档对象模型元素的所述第二字符串，其中，所述第二获取方法用于获取所述图标文档对象模型元素样式的属性值。

12.根据权利要求10所述的图标样式切换装置，其中，所述切换模块，用于基于所述待更新描述信息确定所述第二字符串的数据格式和数据内容，响应于所述第一字符串的数据格式等同于所述第二字符串的数据格式且所述第一字符串的数据内容不同于所述第二字符串的数据内容，采用所述第二字符串覆盖所述第一字符串，得到处理结果，以及基于所述处理结果，将所述初始图标样式切换显示为所述目标图标样式。

13.根据权利要求12所述的图标样式切换装置，其中，所述切换模块，用于采用所述处理结果对所述图标文档对象模型元素的页面显示子元素进行赋值，将所述初始图标样式切换显示为所述目标图标样式，其中，所述页面显示子元素用于改变所述图标文档对象模型元素的页面内容、结构和样式。

14.根据权利要求8所述的图标样式切换装置，其特征在于，通过终端设备提供一图形用户界面，所述图形用户界面所显示的内容至少部分地包含一图标样式切换场景，所述图标样式切换装置还包括：

选取模块，用于响应作用于所述图形用户界面的第一触控操作，从所述目标主题下提供的多个候选图标样式中选取所述目标图标样式；

处理模块，用于响应作用于所述图形用户界面的第二触控操作，采用第二字符串覆盖第一字符串，将所述初始图标样式切换显示为所述目标图标样式。

15.一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-7中任一项所述的图标样式切换方法。

16.一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据权利要求1-7中任一项所述的图标样式切换方法。

17.一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现根据权利要求1-7中任一项所述的图标样式切换方法。