CN106503212A

CN106503212A - 一种网页元素样式的设置方法及装置

Info

Publication number: CN106503212A
Application number: CN201610958101.9A
Authority: CN
Inventors: 刘晨
Original assignee: Ce Dongli Technology Co Ltd
Current assignee: Ce Dongli Technology Co Ltd
Priority date: 2016-10-27
Filing date: 2016-10-27
Publication date: 2017-03-15

Abstract

本发明提供了一种网页元素样式的设置方法及装置，其中，该方法包括：获取网页元素样式的数据交换格式的属性数据，该属性数据包括网页元素样式的属性名称和属性值；在用于编辑网页元素样式的设置面板上以文本格式显示上述属性名称和上述属性值；接收用户对属性值的修改，生成修改后的数据交换格式的属性数据；根据修改后的数据交换格式的属性数据，更新相应的网页元素样式的层叠样式表代码。本发明实施例通过获取预先存储的与网页元素样式的层叠样式表代码对应的数据交换格式的属性数据，在网页元素样式设置过程中直接回显该数据交换格式的属性数据，能够保证回显的属性值与原层叠样式表代码中属性值的一致性。

Description

一种网页元素样式的设置方法及装置

技术领域

本发明涉及网页设计技术领域，具体而言，涉及一种网页元素样式的设置方法及装置。

背景技术

目前，通过CSS渲染html最终呈现出页面，其中，CSS是一个或多个文件放在页面里，网页元素表示页面中一段html，网站设计编辑器中需要通过设置面板对网页元素CSS样式进行设置，因而，设置面板需要显示待设置网页元素的样式的属性值，开发人员对该样式的属性值进行修改，然后通过包含修改后属性值的CSS渲染html最终呈现具有新样式的页面。

当前，相关技术中提供了一种网页元素样式的设置方法，其中，该方法主要为：采用调用浏览器接口直接对网页元素的样式进行设置的方式，首先，通过浏览器DOM接口直接从浏览器DOM对象中获取网页元素样式的CSS值，然后，对该网页元素样式的CSS值进行修改，或者，通过CSS文本解析或样式表对象遍历查找的方式进行。由于浏览器提供程序接口读取某个html节点(DOM对象)上的是浏览器计算后的样式的属性值，该样式属性值和CSS文件里的属性值的表示形式可能存在一定的差异，比如：用户设置某部分颜色为十六进制形式如#FFFFFF，而通过浏览器DOM对象获取的形式可能会是RGB(256,256,256),又如，用户设置的百分比值获取的可能会是像素值。

在实现本发明的过程中，发明人发现相关技术中至少存在以下问题：采用调用浏览器提供的接口直接从浏览器DOM对象中读取网页元素样式的属性值的方式，需要浏览器对属性值进行计算处理后再显示，由于从浏览器DOM对象中获取的属性值是浏览器计算后的样式的属性值，导致在设置面板上显示的网页元素样式的属性值与层叠样式表代码中的属性值表示形式不一致，不便于用户对该属性值进行修改。

发明内容

有鉴于此，本发明实施例的目的在于提供一种网页元素样式的设置方法及装置，以解决相关技术中存在由于从浏览器DOM对象中获取的属性值是浏览器计算后的样式的属性值，导致在设置面板上显示的网页元素样式的属性值与层叠样式表代码中的属性值表示形式不一致，不便于用户对该属性值进行修改的问题。

第一方面，本发明实施例提供了一种网页元素样式的设置方法，该方法包括：

获取网页元素样式的数据交换格式的属性数据，所述属性数据包括所述网页元素样式的属性名称和属性值；

在用于编辑所述网页元素样式的设置面板上以文本格式显示所述属性名称和所述属性值；

接收用户对所述属性值的修改，生成修改后的数据交换格式的属性数据；

根据修改后的所述数据交换格式的属性数据，更新相应的所述网页元素样式的层叠样式表代码。

结合第一方面，本发明实施例提供了第一方面的第一种可能的实施方式，其中，所述获取网页元素样式的数据交换格式的属性数据之前，还包括：

将所述网页元素样式的层叠样式表代码转换为数据交换格式的属性数据；

存储所述网页元素样式的所述层叠样式表代码和所述数据交换格式的属性数据。

结合第一方面的第一种可能的实施方式，本发明实施例提供了第一方面的第二种可能的实施方式，其中，所述将所述网页元素样式的层叠样式表代码转换为数据交换格式的属性数据，包括：

提取所述网页元素样式的层叠样式表代码中的选择器和声明；

将所述选择器和所述声明分别设置为网页元素属性和CSS样式属性的键值对；

将所述网页元素属性和所述CSS样式属性的键值对以数据交换格式进行封装，生成所述网页元素样式的数据交换格式的属性数据。

结合第一方面的第二种可能的实施方式，本发明实施例提供了第一方面的第三种可能的实施方式，其中，所述提取所述网页元素样式的层叠样式表代码中的选择器和声明，包括：

通过正则表达式匹配所述网页元素样式的层叠样式表代码中的注释文本，并将匹配获得的注释文本替换为空；

通过正则表达式匹配所述层叠样式表代码中成组的花括号前的文本，提取所述文本作为选择器；

通过正则表达式匹配所述花括号内的冒号，提取所述冒号及所述冒号前后的文本作为声明。

结合第一方面，本发明实施例提供了第一方面的第四种可能的实施方式，其中，所述根据修改后的所述数据交换格式的属性数据，更新相应的所述网页元素样式的层叠样式表代码，包括：

将修改后的所述数据交换格式的属性数据转换为层叠样式表代码，利用转换后的所述层叠样式表代码替换所述网页元素样式的层叠样式表代码；或者，

查找与所述网页元素样式对应的DOM对象，将修改后的所述数据交换格式的属性数据中的所述属性值设置到所述DOM对象对应的节点上，通过DOM对象更新所述网页元素样式的层叠样式表代码。

结合第一方面至第一方面的第四种可能的实施方式中任一种实施方式，本发明实施例提供了第一方面的第五种可能的实施方式，其中，所述数据交换格式为JSON格式。

第二方面，本发明实施例还提供了一种网页元素样式的设置装置，该装置包括：

获取模块，用于获取网页元素样式的数据交换格式的属性数据，所述属性数据包括所述网页元素样式的属性名称和属性值；

显示模块，用于在用于编辑所述网页元素样式的设置面板上以文本格式显示所述属性名称和所述属性值；

生成模块，用于接收用户对所述属性值的修改，生成修改后的数据交换格式的属性数据；

更新模块，用于根据修改后的所述数据交换格式的属性数据，更新相应的所述网页元素样式的层叠样式表代码。

结合第二方面，本发明实施例提供了第二方面的第一种可能的实施方式，其中，所述装置还包括：

转换模块，用于将所述网页元素样式的层叠样式表代码转换为数据交换格式的属性数据；

存储模块，用于存储所述网页元素样式的所述层叠样式表代码和所述数据交换格式的属性数据。

结合第二方面的第一种可能的实施方式，本发明实施例提供了第二方面的第二种可能的实施方式，其中，所述转换模块包括：

提取子模块，用于提取所述网页元素样式的层叠样式表代码中的选择器和声明；

设置子模块，用于将所述选择器和所述声明分别设置为网页元素属性和CSS样式属性的键值对；

生成子模块，用于将所述网页元素属性和所述CSS样式属性的键值对以数据交换格式进行封装，生成所述网页元素样式的数据交换格式的属性数据。

结合第二方面的第二种可能的实施方式，本发明实施例提供了第二方面的第三种可能的实施方式，其中，所述提取子模块，具体用于通过正则表达式匹配所述网页元素样式的层叠样式表代码中的注释文本，并将匹配获得的注释文本替换为空；通过正则表达式匹配所述层叠样式表代码中成组的花括号前的文本，提取所述文本作为选择器；通过正则表达式匹配所述花括号内的冒号，提取所述冒号及所述冒号前后的文本作为声明。

结合第二方面，本发明实施例提供了第二方面的第四种可能的实施方式，其中，所述更新模块包括：

第一更新子模块，用于将修改后的所述数据交换格式的属性数据转换为层叠样式表代码，利用转换后的所述层叠样式表代码替换所述网页元素样式的层叠样式表代码；或者，

第二更新子模块，用于查找与所述网页元素样式对应的DOM对象，将修改后的所述数据交换格式的属性数据中的所述属性值设置到所述DOM对象对应的节点上，通过DOM对象更新所述网页元素样式的层叠样式表代码。

结合第二方面至第二方面的第四种可能的实施方式中任一种实施方式，本发明实施例提供了第二方面的第五种可能的实施方式，其中，所述数据交换格式为JSON格式。

在本发明实施例提供的网页元素样式的设置方法及装置中，获取网页元素样式的数据交换格式的属性数据，该属性数据包括网页元素样式的属性名称和属性值；在用于编辑网页元素样式的设置面板上以文本格式显示上述属性名称和上述属性值；接收用户对属性值的修改，生成修改后的数据交换格式的属性数据；根据修改后的数据交换格式的属性数据，更新相应的网页元素样式的层叠样式表代码。本发明实施例通过获取预先存储的与网页元素样式的层叠样式表代码对应的数据交换格式的属性数据，在网页元素样式设置过程中直接以文本格式回显该数据交换格式的属性数据，并接收用户对该数据交换格式的属性数据中的属性值的修改，能够保证回显的属性值与原层叠样式表代码中属性值的一致性。

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

附图说明

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

图1示出了本发明实施例所提供的一种网页元素样式的设置方法的流程示意图；

图2示出了本发明实施例所提供的另一种网页元素样式的设置方法的流程示意图；

图3示出了本发明实施例所提供的一种网页元素样式的设置装置的结构示意图；

图4示出了本发明实施例所提供的另一种网页元素样式的设置装置的结构示意图。

具体实施方式

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

考虑到相关技术中存在由于从浏览器DOM对象中获取的属性值是浏览器计算后的样式的属性值，导致在设置面板上显示的网页元素样式的属性值与层叠样式表代码中的属性值表示形式不一致，不便于用户对该属性值进行修改的问题。基于此，本发明实施例提供了一种网页元素样式的设置方法及装置，下面通过实施例进行描述。

如图1所示，本发明实施例提供了一种网页元素样式的设置方法，该方法包括步骤S102-S108，具体如下：

步骤S102：获取网页元素样式的数据交换格式的属性数据，所述属性数据包括所述网页元素样式的属性名称和属性值，该数据交换格式的属性数据与网页元素样式的CSS代码一一对应；

步骤S104：在用于编辑所述网页元素样式的设置面板上以文本格式显示所述属性名称和所述属性值；

步骤S106：接收用户对所述属性值的修改，生成修改后的数据交换格式的属性数据；

步骤S108：根据修改后的所述数据交换格式的属性数据，更新相应的所述网页元素样式的层叠样式表代码，再将更新后的层叠样式表代码渲染html呈现出页面，此时页面将呈现新的网页元素样式。

其中，上述网页元素可以是网页页面，也可以是网页组件，考虑到JSON格式便于JavaScript操作，上述数据交换格式可以是JSON格式，JSON(JavaScript ObjectNotation，JavaScript原生格式)采用完全独立于语言的文本格式，JSON成为理想的数据交换语言。

在本发明提供的实施例中，通过获取预先存储的与网页元素样式的层叠样式表代码对应的数据交换格式的属性数据，在网页元素样式设置过程中直接以文本格式回显该数据交换格式的属性数据，并接收用户对该数据交换格式的属性数据中的属性值的修改，能够保证回显的属性值与原层叠样式表代码中属性值的一致性，同时，无需浏览器对属性值进行计算处理，简化了网页元素样式的回显与设置过程，另外，对网页元素样式进行修改时，直接对显示的数据交换格式的属性数据中的属性值进行修改，省去了每次修改都对CSS代码进行解析的过程，减少了CSS代码解析次数，提高了整体性能。

进一步的，如图2所示，在上述步骤S102获取网页元素样式的数据交换格式的属性数据之前，还包括：

步骤S202：将所述网页元素样式的层叠样式表代码转换为数据交换格式的属性数据；

步骤S204：存储所述网页元素样式的所述层叠样式表代码和所述数据交换格式的属性数据。

在本发明提供的实施例中，利用CSS代码文本转换为JSON对象的解析程序预先将各个网页元素样式的CSS代码转换为数据交换格式(如，JSON格式)，以网页元素的维度建立并存储各个网页元素样式的CSS代码形式的属性数据与数据交换格式的属性数据的映射关系，即对网站设计编辑器中网页元素样式的CSS属性数据进行抽象，建立并存储抽象数据，该抽象数据为数据交换格式的属性数据，以便后续对网页元素样式进行修改过程中，直接以文本格式显示待修改的网页元素样式的属性数据，从而能够保证回显的属性值与原层叠样式表代码中属性值的一致性，便于用户直观地对网页样式的属性值进行修改。

其中，CSS(Cascading Style Sheets，层叠样式表)代码，简称CSS样式表，又被称为CSS样式，CSS样式作为一种能制作出各种样式网页的技术，在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制；JSON结构的格式就是若干个键/值(key,value)对的集合，该集合可以理解为字典(Dictionary)，每个键/值对可以理解成一个对象(Object)。键/值对中的键(key)一般是一个string，值(value)可以是string、double、int等基本类型，也可以嵌套一个JSON对象(键/值对)，也可以是一个数组，数组里面的数据的类型可以是基本类型，或者键/值对。

具体的，所述将所述网页元素样式的层叠样式表代码转换为数据交换格式的属性数据，具体包括：

其中，所述提取所述网页元素样式的层叠样式表代码中的选择器和声明，包括：

举例说明，网页元素样式的层叠样式表代码(CSS代码)，如：

#id{

color:red

}

网页元素样式的json格式数据，如：

结合上述程序代码可知，‘elem’：后内容表示选择器(网页元素属性#id)，‘css’：后花括号中内容表示声明(CSS样式属性的键值对)，即将选择器放入‘elem’属性，css属性以键值对的对象方式放入‘css’属性。

进一步的，所述根据修改后的所述数据交换格式的属性数据，更新相应的所述网页元素样式的层叠样式表代码，包括：

在本发明提供的实施例中，给出了两种根据修改后的数据交换格式的属性数据更新相应的网页元素样式的层叠样式表代码的方式，一种为直接利用JSON对象转换为CSS代码文本的生成程序通过循环对象，字符串拼接的方式生成，将修改后的数据交换格式的属性数据转换为层叠样式表代码，即利用生成程序将修改后的JSON格式属性数据转换为CSS代码；另一种为查找与网页元素样式对应的DOM对象，将修改后的数据交换格式的属性数据中的属性值设置到该DOM对象对应的节点上，以实现对原CSS代码中的属性值进行更新，即通过JSON格式的属性数据中‘elem’部分选中要修改的DOM对象，把‘css’数据直接设置到页面中对应的DOM节点上(将声明复制给相应的DOM节点)。

在本发明实施例提供的网页元素样式的设置方法中，获取网页元素样式的数据交换格式的属性数据，该属性数据包括网页元素样式的属性名称和属性值；在用于编辑网页元素样式的设置面板上以文本格式显示上述属性名称和上述属性值；接收用户对属性值的修改，生成修改后的数据交换格式的属性数据；根据修改后的数据交换格式的属性数据，更新相应的网页元素样式的层叠样式表代码。本发明实施例通过获取预先存储的与网页元素样式的层叠样式表代码对应的数据交换格式的属性数据，在网页元素样式设置过程中直接以文本格式回显该数据交换格式的属性数据，并接收用户对该数据交换格式的属性数据中的属性值的修改，能够保证回显的属性值与原层叠样式表代码中属性值的一致性。

本发明实施例还提供了一种网页元素样式的设置装置，如图3所示，该装置包括：

获取模块302，用于获取网页元素样式的数据交换格式的属性数据，所述属性数据包括所述网页元素样式的属性名称和属性值；

显示模块304，用于在用于编辑所述网页元素样式的设置面板上以文本格式显示所述属性名称和所述属性值；

生成模块306，用于接收用户对所述属性值的修改，生成修改后的数据交换格式的属性数据；

更新模块308，用于根据修改后的所述数据交换格式的属性数据，更新相应的所述网页元素样式的层叠样式表代码。

在本发明提供的实施例中，通过获取预先存储的与网页元素样式的层叠样式表代码对应的数据交换格式的属性数据，在网页元素样式设置过程中直接以文本格式回显该数据交换格式的属性数据，并接收用户对该数据交换格式的属性数据中的属性值的修改，能够保证回显的属性值与原层叠样式表代码中属性值的一致性。

进一步的，如图4所示，所述装置还包括：

转换模块402，用于将所述网页元素样式的层叠样式表代码转换为数据交换格式的属性数据；

存储模块404，用于存储所述网页元素样式的所述层叠样式表代码和所述数据交换格式的属性数据。

进一步的，所述转换模块402包括：

进一步的，所述提取子模块，具体用于，通过正则表达式匹配所述网页元素样式的层叠样式表代码中的注释文本，并将匹配获得的注释文本替换为空；通过正则表达式匹配所述层叠样式表代码中成组的花括号前的文本，提取所述文本作为选择器；通过正则表达式匹配所述花括号内的冒号，提取所述冒号及所述冒号前后的文本作为声明。

进一步的，所述更新模块308包括：

进一步的，所述数据交换格式为JSON格式。

在本发明实施例提供的网页元素样式的设置装置中，利用获取模块302获取网页元素样式的数据交换格式的属性数据，该属性数据包括网页元素样式的属性名称和属性值；在利用显示模块304在用于编辑网页元素样式的设置面板上以文本格式显示上述属性名称和上述属性值；然后利用生成模块306接收用户对属性值的修改，生成修改后的数据交换格式的属性数据；最后利用更新模块308根据修改后的数据交换格式的属性数据，更新相应的网页元素样式的层叠样式表代码。本发明实施例通过获取预先存储的与网页元素样式的层叠样式表代码对应的数据交换格式的属性数据，在网页元素样式设置过程中直接以文本格式回显该数据交换格式的属性数据，并接收用户对该数据交换格式的属性数据中的属性值的修改，能够保证回显的属性值与原层叠样式表代码中属性值的一致性。

本发明实施例所提供的网页元素样式的设置装置可以为设备上的特定硬件或者安装于设备上的软件或固件等。本发明实施例所提供的装置，其实现原理及产生的技术效果和前述方法实施例相同，为简要描述，装置实施例部分未提及之处，可参考前述方法实施例中相应内容。所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，前述描述的系统、装置和单元的具体工作过程，均可以参考上述方法实施例中的对应过程，在此不再赘述。

在本发明所提供的实施例中，应该理解到，所揭露装置和方法，可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，又例如，多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

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

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

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

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释，此外，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

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

Claims

1.一种网页元素样式的设置方法，其特征在于，所述方法包括：

2.根据权利要求1所述的方法，其特征在于，所述获取网页元素样式的数据交换格式的属性数据之前，还包括：

3.根据权利要求2所述的方法，其特征在于，所述将所述网页元素样式的层叠样式表代码转换为数据交换格式的属性数据，包括：

4.根据权利要求3所述的方法，其特征在于，所述提取所述网页元素样式的层叠样式表代码中的选择器和声明，包括：

5.根据权利要求1所述的方法，其特征在于，所述根据修改后的所述数据交换格式的属性数据，更新相应的所述网页元素样式的层叠样式表代码，包括：

6.根据权利要求1至5任一项所述的方法，其特征在于，所述数据交换格式为JSON格式。

7.一种网页元素样式的设置装置，其特征在于，所述装置包括：

8.根据权利要求7所述的装置，其特征在于，所述装置还包括：

9.根据权利要求8所述的装置，其特征在于，所述转换模块包括：

10.根据权利要求7至9任一项所述的装置，其特征在于，所述数据交换格式为JSON格式。