网页CSS结构自动生成方法及存储介质技术

本发明专利技术涉及一种网页CSS结构自动生成方法、装置及存储介质，属于互联网技术领域。通过本发明专利技术的方法，首先在网页中创建一个容器元素，设定该容器元素的标识；将HTML代码赋值给容器元素，生成以该容器元素的标识为父节点的DOM树；而后遍历DOM树的所有节点，生成相应的CSS结构，从而实现网页CSS结构的自动生成，特别在WEB项目结构复杂，DOM元素的层级较多的情况下，能够使得CSS结构清晰，便于维护，进而极大地提高程序员的工作效率。且本发明专利技术的网页CSS结构自动生成装置的结构简单，应用成本有限，应用范围也十分广泛。应用范围也十分广泛。应用范围也十分广泛。

【技术实现步骤摘要】
网页CSS结构自动生成方法及存储介质


[0001]本专利技术涉及互联网
，特别涉及WEB页面
，具体是指一种网页CSS结构自动生成方法及存储介质。

技术介绍

[0002]通常在WEB项目刚开始的时候，项目结构都比较简单，可能只有几个页面，这时使用一些基本的CSS选择器，诸如.title、input、#app等就能实现，几行代码手写就能完成。但是随着应用逐渐变大，页面上前端交互随之增多，再加上HTML结构的语义化方面的要求，DOM元素的层级关系也会越来越多，CSS代码也会越来越复杂。此时如果还是一行一行书写代码，效率将非常低。
[0003]另一方面，如果没处理好CSS结构的层级关系，经常遇到的一个问题是，会出现页面某些元素会被其他元素遮盖，虽然CSS提供了一些属性例如position:relative或position:absolute，以及z-index值来改变元素的层级。但是，如果z-index过多或其值没有被充分考虑的话，元素的层级关系反倒会变得更加复杂。而且很多开发者习惯把所有新增的CSS代码直接放到文件末尾，而不是按本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种网页CSS结构自动生成方法，其特征在于，该方法包括以下步骤：在网页中创建一个容器元素，并设定该容器元素的标识；获得该网页的HTML代码；将所述的HTML代码赋值给所述的容器元素，生成以该容器元素的所述标识为父节点的DOM树；遍历所述的DOM树的所有节点，生成相应的CSS结构。2.根据权利要求1所述的网页CSS结构自动生成方法，其特征在于，所述将所述的HTML代码赋值给所述的容器元素，生成以该容器元素的所述标识为父节点的DOM树，具体为：根据所述的HTML代码获取所述网页的HTML结构，而后以所述的容器元素的标识作为父节点，自动生成与该HTML结构对应的DOM树。3.根据权利要求1所述的网页CSS结构自动生成方法，其特征在于，所述的遍历所述的DOM树的所有节点，生成相应的CSS结构，具体为：利用JavaScript遍历所述的DOM树的所有节点，根据预设的规则，生成相应的CSS结构。4.根据权利要求3所述的网页CSS结构自动生成方法，其特征在于，所述的根据预设的规则，生成相应的CSS结构，具体为：根据DOM树的各个节点的层级关系及先后次序，生成具有对应层级和次序的CSS结构。5.根据权利要求4所述的网页CSS结构自动生成方法，其特征在于，所述的各个节点的层级关系及先后次序根据各个节点的标签、标识、样式名中的一种或全部确定。6.根据权利要求4所述的网页CSS结构自动生成方法，其特征在于，所述的样式名为前置限定样式名，根据各节点的前置限定样式名确定所述的各个节点的层级关系及先后次序，并生成具有对应层级...

【专利技术属性】
技术研发人员：王海洋，
申请(专利权)人：上海哔哩哔哩科技有限公司，
类型：发明
国别省市：