一种网页元素样式的设置方法及装置制造方法及图纸

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

【技术实现步骤摘要】

本专利技术涉及网页设计
，具体而言，涉及一种网页元素样式的设置方法及装置。
技术介绍
目前，通过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.根据权利要求1所述的方法，其特征在于，所述获取网页元素样式的数据交换格式的属性数据之前，还包括：将所述网页元素样式的层叠样式表代码转换为数据交换格式的属性数据；存储所述网页元素样式的所述层叠样式表代码和所述数据交换格式的属性数据。3.根据权利要求2所述的方法，其特征在于，所述将所述网页元素样式的层叠样式表代码转换为数据交换格式的属性数据，包括：提取所述网页元素样式的层叠样式表代码中的选择器和声明；将所述选择器和所述声明分别设置为网页元素属性和CSS样式属性的键值对；将所述网页元素属性和所述CSS样式属性的键值对以数据交换格式进行封装，生成所述网页元素样式的数据交换格式的属性数据。4.根据权利要求3所述的方法，其特征在于，所述提取所述网页元素样式的层叠样式表代码中的选择器和声明，包括：通过正则表达式匹配所述网页元素样式的层叠样式表代码中的注释文本，并将匹配获得的注释文本替换为空；通过正则表达式匹配所述层叠样式表代码中成组的花括号前的文本，提取所述文本作为选择器；通过正则表达式匹配所述花括号内的冒号，提取所述冒号及所述冒号前后的文本作为声明。5.根据权利要求1所述的方法，其特征在于，所述根据修改后的所述数据交换格式的属性数据，更新相应的所述网页元素样式的层叠样式表代码，包括：将修...

【专利技术属性】
技术研发人员：刘晨，
申请(专利权)人：中企动力科技股份有限公司，
类型：发明
国别省市：北京;11