CN106503212A - 一种网页元素样式的设置方法及装置 - Google Patents
一种网页元素样式的设置方法及装置 Download PDFInfo
- Publication number
- CN106503212A CN106503212A CN201610958101.9A CN201610958101A CN106503212A CN 106503212 A CN106503212 A CN 106503212A CN 201610958101 A CN201610958101 A CN 201610958101A CN 106503212 A CN106503212 A CN 106503212A
- Authority
- CN
- China
- Prior art keywords
- attribute
- style
- data
- webpage element
- data exchange
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 45
- 238000012986 modification Methods 0.000 claims abstract description 18
- 230000004048 modification Effects 0.000 claims abstract description 18
- 238000013497 data interchange Methods 0.000 claims abstract 6
- 210000001072 colon Anatomy 0.000 claims description 15
- 238000006243 chemical reaction Methods 0.000 claims description 6
- 238000004806 packaging method and process Methods 0.000 claims description 6
- 238000000605 extraction Methods 0.000 claims description 3
- 230000008569 process Effects 0.000 description 12
- 238000004891 communication Methods 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000013461 design Methods 0.000 description 3
- 238000010586 diagram Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 125000004122 cyclic group Chemical group 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000001151 other effect Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Document Processing Apparatus (AREA)
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样式属性的键值对;
将所述网页元素属性和所述CSS样式属性的键值对以数据交换格式进行封装,生成所述网页元素样式的数据交换格式的属性数据。
其中,所述提取所述网页元素样式的层叠样式表代码中的选择器和声明,包括:
通过正则表达式匹配所述网页元素样式的层叠样式表代码中的注释文本,并将匹配获得的注释文本替换为空;
通过正则表达式匹配所述层叠样式表代码中成组的花括号前的文本,提取所述文本作为选择器;
通过正则表达式匹配所述花括号内的冒号,提取所述冒号及所述冒号前后的文本作为声明。
举例说明,网页元素样式的层叠样式表代码(CSS代码),如:
#id{
color:red
}
网页元素样式的json格式数据,如:
结合上述程序代码可知,‘elem’:后内容表示选择器(网页元素属性#id),‘css’:后花括号中内容表示声明(CSS样式属性的键值对),即将选择器放入‘elem’属性,css属性以键值对的对象方式放入‘css’属性。
进一步的,所述根据修改后的所述数据交换格式的属性数据,更新相应的所述网页元素样式的层叠样式表代码,包括:
将修改后的所述数据交换格式的属性数据转换为层叠样式表代码,利用转换后的所述层叠样式表代码替换所述网页元素样式的层叠样式表代码;或者,
查找与所述网页元素样式对应的DOM对象,将修改后的所述数据交换格式的属性数据中的所述属性值设置到所述DOM对象对应的节点上,通过DOM对象更新所述网页元素样式的层叠样式表代码。
在本发明提供的实施例中,给出了两种根据修改后的数据交换格式的属性数据更新相应的网页元素样式的层叠样式表代码的方式,一种为直接利用JSON对象转换为CSS代码文本的生成程序通过循环对象,字符串拼接的方式生成,将修改后的数据交换格式的属性数据转换为层叠样式表代码,即利用生成程序将修改后的JSON格式属性数据转换为CSS代码;另一种为查找与网页元素样式对应的DOM对象,将修改后的数据交换格式的属性数据中的属性值设置到该DOM对象对应的节点上,以实现对原CSS代码中的属性值进行更新,即通过JSON格式的属性数据中‘elem’部分选中要修改的DOM对象,把‘css’数据直接设置到页面中对应的DOM节点上(将声明复制给相应的DOM节点)。
在本发明实施例提供的网页元素样式的设置方法中,获取网页元素样式的数据交换格式的属性数据,该属性数据包括网页元素样式的属性名称和属性值;在用于编辑网页元素样式的设置面板上以文本格式显示上述属性名称和上述属性值;接收用户对属性值的修改,生成修改后的数据交换格式的属性数据;根据修改后的数据交换格式的属性数据,更新相应的网页元素样式的层叠样式表代码。本发明实施例通过获取预先存储的与网页元素样式的层叠样式表代码对应的数据交换格式的属性数据,在网页元素样式设置过程中直接以文本格式回显该数据交换格式的属性数据,并接收用户对该数据交换格式的属性数据中的属性值的修改,能够保证回显的属性值与原层叠样式表代码中属性值的一致性。
本发明实施例还提供了一种网页元素样式的设置装置,如图3所示,该装置包括:
获取模块302,用于获取网页元素样式的数据交换格式的属性数据,所述属性数据包括所述网页元素样式的属性名称和属性值;
显示模块304,用于在用于编辑所述网页元素样式的设置面板上以文本格式显示所述属性名称和所述属性值;
生成模块306,用于接收用户对所述属性值的修改,生成修改后的数据交换格式的属性数据;
更新模块308,用于根据修改后的所述数据交换格式的属性数据,更新相应的所述网页元素样式的层叠样式表代码。
在本发明提供的实施例中,通过获取预先存储的与网页元素样式的层叠样式表代码对应的数据交换格式的属性数据,在网页元素样式设置过程中直接以文本格式回显该数据交换格式的属性数据,并接收用户对该数据交换格式的属性数据中的属性值的修改,能够保证回显的属性值与原层叠样式表代码中属性值的一致性。
进一步的,如图4所示,所述装置还包括:
转换模块402,用于将所述网页元素样式的层叠样式表代码转换为数据交换格式的属性数据;
存储模块404,用于存储所述网页元素样式的所述层叠样式表代码和所述数据交换格式的属性数据。
进一步的,所述转换模块402包括:
提取子模块,用于提取所述网页元素样式的层叠样式表代码中的选择器和声明;
设置子模块,用于将所述选择器和所述声明分别设置为网页元素属性和CSS样式属性的键值对;
生成子模块,用于将所述网页元素属性和所述CSS样式属性的键值对以数据交换格式进行封装,生成所述网页元素样式的数据交换格式的属性数据。
进一步的,所述提取子模块,具体用于,通过正则表达式匹配所述网页元素样式的层叠样式表代码中的注释文本,并将匹配获得的注释文本替换为空;通过正则表达式匹配所述层叠样式表代码中成组的花括号前的文本,提取所述文本作为选择器;通过正则表达式匹配所述花括号内的冒号,提取所述冒号及所述冒号前后的文本作为声明。
进一步的,所述更新模块308包括:
第一更新子模块,用于将修改后的所述数据交换格式的属性数据转换为层叠样式表代码,利用转换后的所述层叠样式表代码替换所述网页元素样式的层叠样式表代码;或者,
第二更新子模块,用于查找与所述网页元素样式对应的DOM对象,将修改后的所述数据交换格式的属性数据中的所述属性值设置到所述DOM对象对应的节点上,通过DOM对象更新所述网页元素样式的层叠样式表代码。
进一步的,所述数据交换格式为JSON格式。
在本发明实施例提供的网页元素样式的设置装置中,利用获取模块302获取网页元素样式的数据交换格式的属性数据,该属性数据包括网页元素样式的属性名称和属性值;在利用显示模块304在用于编辑网页元素样式的设置面板上以文本格式显示上述属性名称和上述属性值;然后利用生成模块306接收用户对属性值的修改,生成修改后的数据交换格式的属性数据;最后利用更新模块308根据修改后的数据交换格式的属性数据,更新相应的网页元素样式的层叠样式表代码。本发明实施例通过获取预先存储的与网页元素样式的层叠样式表代码对应的数据交换格式的属性数据,在网页元素样式设置过程中直接以文本格式回显该数据交换格式的属性数据,并接收用户对该数据交换格式的属性数据中的属性值的修改,能够保证回显的属性值与原层叠样式表代码中属性值的一致性。
本发明实施例所提供的网页元素样式的设置装置可以为设备上的特定硬件或者安装于设备上的软件或固件等。本发明实施例所提供的装置,其实现原理及产生的技术效果和前述方法实施例相同,为简要描述,装置实施例部分未提及之处,可参考前述方法实施例中相应内容。所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,前述描述的系统、装置和单元的具体工作过程,均可以参考上述方法实施例中的对应过程,在此不再赘述。
在本发明所提供的实施例中,应该理解到,所揭露装置和方法,可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,又例如,多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些通信接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本发明提供的实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(Read-Only Memory,ROM)、随机存取存储器(Random Access Memory,RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
应注意到:相似的标号和字母在下面的附图中表示类似项,因此,一旦某一项在一个附图中被定义,则在随后的附图中不需要对其进行进一步定义和解释,此外,术语“第一”、“第二”、“第三”等仅用于区分描述,而不能理解为指示或暗示相对重要性。
最后应说明的是:以上所述实施例,仅为本发明的具体实施方式,用以说明本发明的技术方案,而非对其限制,本发明的保护范围并不局限于此,尽管参照前述实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化,或者对其中部分技术特征进行等同替换;而这些修改、变化或者替换,并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围。都应涵盖在本发明的保护范围之内。因此,本发明的保护范围应所述以权利要求的保护范围为准。
Claims (10)
1.一种网页元素样式的设置方法,其特征在于,所述方法包括:
获取网页元素样式的数据交换格式的属性数据,所述属性数据包括所述网页元素样式的属性名称和属性值;
在用于编辑所述网页元素样式的设置面板上以文本格式显示所述属性名称和所述属性值;
接收用户对所述属性值的修改,生成修改后的数据交换格式的属性数据;
根据修改后的所述数据交换格式的属性数据,更新相应的所述网页元素样式的层叠样式表代码。
2.根据权利要求1所述的方法,其特征在于,所述获取网页元素样式的数据交换格式的属性数据之前,还包括:
将所述网页元素样式的层叠样式表代码转换为数据交换格式的属性数据;
存储所述网页元素样式的所述层叠样式表代码和所述数据交换格式的属性数据。
3.根据权利要求2所述的方法,其特征在于,所述将所述网页元素样式的层叠样式表代码转换为数据交换格式的属性数据,包括:
提取所述网页元素样式的层叠样式表代码中的选择器和声明;
将所述选择器和所述声明分别设置为网页元素属性和CSS样式属性的键值对;
将所述网页元素属性和所述CSS样式属性的键值对以数据交换格式进行封装,生成所述网页元素样式的数据交换格式的属性数据。
4.根据权利要求3所述的方法,其特征在于,所述提取所述网页元素样式的层叠样式表代码中的选择器和声明,包括:
通过正则表达式匹配所述网页元素样式的层叠样式表代码中的注释文本,并将匹配获得的注释文本替换为空;
通过正则表达式匹配所述层叠样式表代码中成组的花括号前的文本,提取所述文本作为选择器;
通过正则表达式匹配所述花括号内的冒号,提取所述冒号及所述冒号前后的文本作为声明。
5.根据权利要求1所述的方法,其特征在于,所述根据修改后的所述数据交换格式的属性数据,更新相应的所述网页元素样式的层叠样式表代码,包括:
将修改后的所述数据交换格式的属性数据转换为层叠样式表代码,利用转换后的所述层叠样式表代码替换所述网页元素样式的层叠样式表代码;或者,
查找与所述网页元素样式对应的DOM对象,将修改后的所述数据交换格式的属性数据中的所述属性值设置到所述DOM对象对应的节点上,通过DOM对象更新所述网页元素样式的层叠样式表代码。
6.根据权利要求1至5任一项所述的方法,其特征在于,所述数据交换格式为JSON格式。
7.一种网页元素样式的设置装置,其特征在于,所述装置包括:
获取模块,用于获取网页元素样式的数据交换格式的属性数据,所述属性数据包括所述网页元素样式的属性名称和属性值;
显示模块,用于在用于编辑所述网页元素样式的设置面板上以文本格式显示所述属性名称和所述属性值;
生成模块,用于接收用户对所述属性值的修改,生成修改后的数据交换格式的属性数据;
更新模块,用于根据修改后的所述数据交换格式的属性数据,更新相应的所述网页元素样式的层叠样式表代码。
8.根据权利要求7所述的装置,其特征在于,所述装置还包括:
转换模块,用于将所述网页元素样式的层叠样式表代码转换为数据交换格式的属性数据;
存储模块,用于存储所述网页元素样式的所述层叠样式表代码和所述数据交换格式的属性数据。
9.根据权利要求8所述的装置,其特征在于,所述转换模块包括:
提取子模块,用于提取所述网页元素样式的层叠样式表代码中的选择器和声明;
设置子模块,用于将所述选择器和所述声明分别设置为网页元素属性和CSS样式属性的键值对;
生成子模块,用于将所述网页元素属性和所述CSS样式属性的键值对以数据交换格式进行封装,生成所述网页元素样式的数据交换格式的属性数据。
10.根据权利要求7至9任一项所述的装置,其特征在于,所述数据交换格式为JSON格式。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201610958101.9A CN106503212A (zh) | 2016-10-27 | 2016-10-27 | 一种网页元素样式的设置方法及装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201610958101.9A CN106503212A (zh) | 2016-10-27 | 2016-10-27 | 一种网页元素样式的设置方法及装置 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN106503212A true CN106503212A (zh) | 2017-03-15 |
Family
ID=58322457
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201610958101.9A Pending CN106503212A (zh) | 2016-10-27 | 2016-10-27 | 一种网页元素样式的设置方法及装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN106503212A (zh) |
Cited By (14)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107608947A (zh) * | 2017-09-22 | 2018-01-19 | 阿里巴巴集团控股有限公司 | Html文件处理方法及装置、电子设备 |
CN109032584A (zh) * | 2018-07-27 | 2018-12-18 | 郑州云海信息技术有限公司 | 一种层叠样式表的生成方法、装置、设备及介质 |
CN109445780A (zh) * | 2018-09-19 | 2019-03-08 | 平安科技(深圳)有限公司 | 一种样式编辑方法及设备 |
CN109725965A (zh) * | 2018-12-13 | 2019-05-07 | 平安普惠企业管理有限公司 | 层叠样式表维护方法、装置、计算机设备及存储介质 |
CN110020385A (zh) * | 2017-09-29 | 2019-07-16 | 甲骨文国际公司 | 用于提取网站特性的系统和方法 |
CN110262948A (zh) * | 2019-04-26 | 2019-09-20 | 阿里巴巴集团控股有限公司 | 页面数据的监听方法、装置及设备 |
CN110879932A (zh) * | 2019-11-12 | 2020-03-13 | 北京达佳互联信息技术有限公司 | 字符代码的获取和生成的方法以及装置 |
CN111580815A (zh) * | 2020-05-08 | 2020-08-25 | 上海泛微网络科技股份有限公司 | 一种页面元素的编辑方法及相关设备 |
CN112035109A (zh) * | 2020-08-31 | 2020-12-04 | 深圳前海微众银行股份有限公司 | 一种显示网页页面的方法及装置 |
CN112882665A (zh) * | 2021-02-20 | 2021-06-01 | 厦门熵基科技有限公司 | 一种打印模板的生成方法、装置、电子设备及存储介质 |
CN113378059A (zh) * | 2021-06-30 | 2021-09-10 | 北京字节跳动网络技术有限公司 | 一种页面展示方法、装置、计算机设备及存储介质 |
CN110795099B (zh) * | 2019-09-03 | 2023-08-29 | 五八有限公司 | 一种页面样式转换方法、装置、终端设备及存储介质 |
CN116795368A (zh) * | 2023-06-29 | 2023-09-22 | 企迈科技有限公司 | 一种基于web实现的小程序页面自定义样式动态化方法 |
CN117194839A (zh) * | 2023-11-08 | 2023-12-08 | 联通在线信息科技有限公司 | 邮箱主题皮肤切换方法、装置、电子设备及存储介质 |
Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102663126A (zh) * | 2012-04-23 | 2012-09-12 | 奇智软件(北京)有限公司 | 一种在移动终端中显示网页的方法及装置 |
US20130086463A1 (en) * | 2011-09-30 | 2013-04-04 | Microsoft Corporation | Decomposing markup language elements for animation |
CN103678317A (zh) * | 2012-08-31 | 2014-03-26 | 百度在线网络技术(北京)有限公司 | 网页布局的自动适配方法与系统 |
CN104199928A (zh) * | 2014-09-03 | 2014-12-10 | 国家电网公司 | 一种半结构化的页面描述与解析方法 |
CN104217037A (zh) * | 2012-04-23 | 2014-12-17 | 北京奇虎科技有限公司 | 一种在移动终端中显示网页的方法及装置 |
CN105373520A (zh) * | 2015-10-13 | 2016-03-02 | 金蝶软件(中国)有限公司 | 设置控件样式属性的方法和装置 |
-
2016
- 2016-10-27 CN CN201610958101.9A patent/CN106503212A/zh active Pending
Patent Citations (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20130086463A1 (en) * | 2011-09-30 | 2013-04-04 | Microsoft Corporation | Decomposing markup language elements for animation |
CN102663126A (zh) * | 2012-04-23 | 2012-09-12 | 奇智软件(北京)有限公司 | 一种在移动终端中显示网页的方法及装置 |
CN104217037A (zh) * | 2012-04-23 | 2014-12-17 | 北京奇虎科技有限公司 | 一种在移动终端中显示网页的方法及装置 |
CN103678317A (zh) * | 2012-08-31 | 2014-03-26 | 百度在线网络技术(北京)有限公司 | 网页布局的自动适配方法与系统 |
CN104199928A (zh) * | 2014-09-03 | 2014-12-10 | 国家电网公司 | 一种半结构化的页面描述与解析方法 |
CN105373520A (zh) * | 2015-10-13 | 2016-03-02 | 金蝶软件(中国)有限公司 | 设置控件样式属性的方法和装置 |
Cited By (17)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107608947A (zh) * | 2017-09-22 | 2018-01-19 | 阿里巴巴集团控股有限公司 | Html文件处理方法及装置、电子设备 |
CN110020385A (zh) * | 2017-09-29 | 2019-07-16 | 甲骨文国际公司 | 用于提取网站特性的系统和方法 |
US12073171B2 (en) | 2017-09-29 | 2024-08-27 | Oracle International Corporation | System and method for extracting website characteristics |
CN110020385B (zh) * | 2017-09-29 | 2023-09-15 | 甲骨文国际公司 | 用于提取网站特性的系统和方法 |
CN109032584A (zh) * | 2018-07-27 | 2018-12-18 | 郑州云海信息技术有限公司 | 一种层叠样式表的生成方法、装置、设备及介质 |
CN109445780A (zh) * | 2018-09-19 | 2019-03-08 | 平安科技(深圳)有限公司 | 一种样式编辑方法及设备 |
CN109725965A (zh) * | 2018-12-13 | 2019-05-07 | 平安普惠企业管理有限公司 | 层叠样式表维护方法、装置、计算机设备及存储介质 |
CN110262948B (zh) * | 2019-04-26 | 2023-01-31 | 创新先进技术有限公司 | 页面数据的监听方法、装置及设备 |
CN110262948A (zh) * | 2019-04-26 | 2019-09-20 | 阿里巴巴集团控股有限公司 | 页面数据的监听方法、装置及设备 |
CN110795099B (zh) * | 2019-09-03 | 2023-08-29 | 五八有限公司 | 一种页面样式转换方法、装置、终端设备及存储介质 |
CN110879932A (zh) * | 2019-11-12 | 2020-03-13 | 北京达佳互联信息技术有限公司 | 字符代码的获取和生成的方法以及装置 |
CN111580815A (zh) * | 2020-05-08 | 2020-08-25 | 上海泛微网络科技股份有限公司 | 一种页面元素的编辑方法及相关设备 |
CN112035109A (zh) * | 2020-08-31 | 2020-12-04 | 深圳前海微众银行股份有限公司 | 一种显示网页页面的方法及装置 |
CN112882665A (zh) * | 2021-02-20 | 2021-06-01 | 厦门熵基科技有限公司 | 一种打印模板的生成方法、装置、电子设备及存储介质 |
CN113378059A (zh) * | 2021-06-30 | 2021-09-10 | 北京字节跳动网络技术有限公司 | 一种页面展示方法、装置、计算机设备及存储介质 |
CN116795368A (zh) * | 2023-06-29 | 2023-09-22 | 企迈科技有限公司 | 一种基于web实现的小程序页面自定义样式动态化方法 |
CN117194839A (zh) * | 2023-11-08 | 2023-12-08 | 联通在线信息科技有限公司 | 邮箱主题皮肤切换方法、装置、电子设备及存储介质 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN106503212A (zh) | 一种网页元素样式的设置方法及装置 | |
US10503806B2 (en) | Extracting a portion of a document, such as a web page | |
US10210260B2 (en) | Templates for displaying data | |
CN108717437B (zh) | 搜索结果展示方法、装置及存储介质 | |
CN106886551B (zh) | 一种利用标记语言显示图像的方法及装置 | |
CN108121539B (zh) | 组件处理方法和装置 | |
KR101950126B1 (ko) | 수학공식 처리방법, 장치, 설비 및 컴퓨터 저장 매체 | |
CN109933751B (zh) | 图文绘制方法、装置、计算机可读存储介质和计算机设备 | |
CN110309457B (zh) | 网页数据处理方法、装置、计算机设备和存储介质 | |
CN111258577A (zh) | 页面渲染方法、装置、电子设备和存储介质 | |
Sikos | Web Standards: Mastering HTML5, CSS3, and XML | |
CN112597410A (zh) | 基于规则配置库对网页内容执行结构化提取的方法及装置 | |
CN113127776A (zh) | 面包屑路径生成方法、装置及终端设备 | |
CN116009863B (zh) | 前端页面渲染方法、设备及存储介质 | |
CN112699642B (zh) | 复杂医疗文书的索引提取方法及装置、介质及电子设备 | |
JP5707937B2 (ja) | 電子文書変換装置及び電子文書変換方法 | |
CN111241788A (zh) | 基于线性模型的文档转换方法、装置、设备及存储介质 | |
CN113342416B (zh) | 一种在小程序中展示h5图文数据的方法及设备 | |
CN116402038B (zh) | 报告生成方法、装置、电子设备及存储介质 | |
CN116541120B (zh) | 一种网页渲染方式的识别方法、系统及计算机设备 | |
CN107045465A (zh) | 一种服务器诊断结果图文化显示的方法及装置 | |
US20240126978A1 (en) | Determining attributes for elements of displayable content and adding them to an accessibility tree | |
JP5477785B2 (ja) | 数式表示制御装置、コンピュータプログラム、プログラム格納媒体 | |
CN117075959A (zh) | 富文本大笔记网页源代码拆分方法以及系统 | |
CN114372028A (zh) | 文件处理方法及装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20170315 |
|
RJ01 | Rejection of invention patent application after publication |