基于css的改变页面主题的方法、装置、电子设备和计算机可读介质制造方法及图纸

技术编号:26791450 阅读:22 留言:0更新日期:2020-12-22 17:06
本发明专利技术提供一种基于css的改变页面主题的方法,包括:根据用户对页面主题样式的设置而生成与用户设置的样式对应的数据串,并将该数据串保存于数据库中;调取该数据库中的与该用户设置的样式对应的数据串,并根据该数据串生成样式参数插入到html标签上的style属性内;以及css样式文件中的var()函数接收html标签中根据该数据串生成的样式参数,从而对页面主题样式进行改变。根据本发明专利技术,在用户需要改变主题时仅需要修改现有的css变量,因此对浏览器来说只涉及到重绘,而不会大面积重构页面,负担较小。同时,由于将用户对主题样式的设置录入到数据库中,因此可以进行统计区分,了解用户的偏好。

【技术实现步骤摘要】
基于css的改变页面主题的方法、装置、电子设备和计算机可读介质
本专利技术涉及计算机领域,更具体而言涉及一种改变页面主题的方法、装置、电子设备和计算机可读介质。
技术介绍
随着互联网技术的发展,用户在上网时的自由度越来越高。为了提高用户的使用体验,一些网站和软件具有切换页面主题的功能,即通常所说的换肤功能。在现有的改变页面主题的方法中,通常是提前准备多个css样式文件,该多个css样式文件分别与多个主题对应,通过加载这些css样式文件能够分别实现不同的页面主题。在用户打开页面时,可让用户根据自己的喜好对主题进行选择,然后根据用户的选择来加载不同的css文件,从而实现用户想要的主题样式。为了提高系统效率,现有技术中提出了一种更换主题样式的方法,其将css样式按照类别进行分类,并写入对应的css类别文件中。当用户想要更改页面主题的一部分样式时,例如当用户想要改变页面文字的大小时,只需要重新加载与文字大小对应的css样式文件即可,不需要加载除文字样式以外的css样式文件。
技术实现思路
专利技术欲解决的技术问题然而,在现有技术中,仍然需要设置多个css样式文件,在用户想要改变页面的主题时,需要重新加载新的css样式文件,因此效率较低,存在进一步改善的余地。用于解决问题的技术手段本专利技术通过以下方案解决上述现有技术中的问题。根据本专利技术的第一方面,提供一种基于css的改变页面主题的方法,包括:根据用户对页面主题样式的设置而生成与用户设置的样式对应的数据串,并将所述数据串保存于数据库中;调取所述数据库中的与该用户设置的样式对应的所述数据串,并根据该数据串生成样式参数插入到html标签上的style属性内;以及css样式文件中的var()函数接收html标签中根据所述数据串生成的样式参数,从而对所述页面主题样式进行改变。进一步优选地,在上述方法中,所述css样式文件中通过:root伪类定义有页面主题样式的默认参数,在打开页面时,加载所述css样式文件从而显示默认主题样式。进一步优选地,在上述方法中,所述样式包括颜色、文字大小、行高、段落间距、阴影和垂直填充中的至少一种。进一步优选地,在上述方法中,所述数据库中储存与多个用户设置的页面主题样式对应的数据串,所述数据串除包含与用户设置的页面主题样式对应的信息外,还包含用户的标识信息。进一步优选地,在上述方法中,当用户打开页面时,所述页面自动识别用户的身份,并根据所述数据串中的所述用户的标识信息与数据库中的数据串进行匹配,当匹配成功时,调取匹配成功的数据串,生成样式参数插入到html标签的style属性内。进一步优选地,在上述方法中,还包括:向用户显示设置面板,供用户对页面中的主题的样式进行设置,在设置面板中设置有多个预设主题选项,该多个预设主题选项分别与预先储存在数据库中的多个数据串对应,通过选择任意所述预设主题选项,而调取与所述预设主题选项对应的数据串,生成样式参数插入到所述html标签的style属性内,生成一预先设定的页面主题。进一步优选地,在上述方法中,所述多个预设主题选项为通过分析所述数据库中的数据串,选取用户选择频率高的主题样式而设置。进一步优选地,在上述方法中,所述设置面板针对页面的不同层级的各个样式分别设置选择按钮,供用户对页面主题样式进行设置。进一步优选地,在上述方法中,所述页面主题样式设置输入框,根据用户的输入内容对页面主题样式进行设置。根据本专利技术的再一方面,还提供一种基于css的改变页面主题的装置,包括:设置模块,所述设置模块根据用户对页面主题样式的设置而生成与用户设置的样式对应的数据串,并将所述数据串保存于数据库中;调取模块,所述调取模块调取所述数据库中的与该用户设置样式对应的数据串并根据该数据串生成样式参数插入到html标签上的style属性内;以及改变模块,所述改变模块使css样式文件中的var()函数接收html标签中根据所述数据串生成的样式参数,从而对页面主题样式进行改变。根据本专利技术的另一方面,还提供一种基于css的改变页面主题的电子设备,包括:一个或多个处理器;以及存储装置,用于存储一个或多个程序,当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如上所述的方法。根据本专利技术的又一方面,还提供一种计算机可读介质,其上存储有程序,其特征在于,该程序被处理器执行,以实现如上所述的基于css的改变页面主题的方法。专利技术效果本专利不需要设置冗余的css样式文件,在用户需要改变主题时仅需要修改现有的css文件的变量本身,由于只涉及到css变量的改变,因此对浏览器来说只涉及到重绘,而不会大面积重构页面,负担较小。同时,由于将用户对主题样式的设置录入到数据库中,因此可以进行统计区分,了解用户的偏好,使推荐更精准。进一步,由于设置了数据库,因此增加与减少样式时只需要对数据库进行操作即可,简单快捷。附图说明图1是示出本专利技术一优选的基于css的改变页面主题的方法的流程图。图2是示出本专利技术一优选地基于css的改变页面主题的装置的方框图。具体实施方式以下,参照附图对本专利技术的实施方式所涉及的基于css的改变页面主题的方法和装置进行详细说明。需要说明的是,本专利技术并不被该实施方式限定。另外,在下述的实施方式中的构成要素中包含本领域技术人员能够容易想到的要素或者实质上相同的要素。在本申请文件中,“主题”指的是页面的整体呈现效果,而“主题样式”或“样式”指的是页面中某一元素的呈现效果。例如,“主题”指的是字体大小、颜色、行高等元素综合作用所呈现的效果,而“主题样式”或“样式”指的是字体大小、颜色、行高等元素自身。可以理解,本说明书中的“改变主题”指的是对主题的各样式进行改变。如图1所示,本专利技术所涉及基于css的改变页面主题的方法设置有数据库来保存用户对主题样式所做的设置,例如以数据串的形式来保存用户期望的主题样式,并从数据库调取该数据串,根据该数据串生成样式参数并插入到页面的html标签上的style属性内。此时,由于html标签style属性内的参数的权重普遍高于css文件中:root伪类所定义的参数的权重,因此对于用户未进行设置的样式(例如除字体大小以外的样式),实现的是与css文件中:root所定义的参数对应的样式(默认样式),而对于用户进行了设置的样式(例如字体大小),var()函数调用html标签中的参数,实现用户想要的样式。由此,本申请的基于css的改变页面主题的方法在用户想要改变页面主题样式时仅需要根据用户所做的设置生成数据串,并根据该数据串生成相应的样式参数插入到html标签中,再使用var()函数调用该参数,即可实现主题样式的改变,在此过程中css样式文件本身没有发生改变,只是调用了不同的参数。...

【技术保护点】
1.一种基于css的改变页面主题的方法,其特征在于,包括:/n根据用户对页面主题样式的设置而生成与用户设置的样式对应的数据串,并将所述数据串保存于数据库中;/n调取所述数据库中的与该用户设置的样式对应的所述数据串,并根据该数据串生成样式参数插入到html标签上的style属性内;以及/ncss样式文件中的var()函数接收html标签中根据所述数据串生成的样式参数,从而对所述页面主题样式进行改变。/n

【技术特征摘要】
1.一种基于css的改变页面主题的方法,其特征在于,包括:
根据用户对页面主题样式的设置而生成与用户设置的样式对应的数据串,并将所述数据串保存于数据库中;
调取所述数据库中的与该用户设置的样式对应的所述数据串,并根据该数据串生成样式参数插入到html标签上的style属性内;以及
css样式文件中的var()函数接收html标签中根据所述数据串生成的样式参数,从而对所述页面主题样式进行改变。


2.如权利要求1所述的方法,其特征在于,其中,
所述css样式文件中通过:root伪类定义有页面主题样式的默认参数,在打开页面时,加载所述css样式文件从而显示默认主题样式。


3.如权利要求1或2所述的方法,其特征在于,其中,
所述样式包括颜色、文字大小、行高、段落间距、阴影和垂直填充中的至少一种。


4.如权利要求1~3中任一项所述的方法,其特征在于,其中,
所述数据库中储存与多个用户设置的页面主题样式对应的数据串,所述数据串除包含与用户设置的页面主题样式对应的信息外,还包含用户的标识信息。


5.如权利要求4所述的方法,其特征在于,其中,
当用户打开页面时,所述页面自动识别用户的身份,并根据所述数据串中的所述用户的标识信息与数据库中的数据串进行匹配,当匹配成功时,调取匹配成功的数据串,生成样式参数插入到html标签的style属性内。


6.如权利要求1~5中任一项所述的方法,其特征在于,还包括:
向用户显示设置面板,供用户对页面中的主题的样式进行设置,
在设置面板中设置有多个预设主题选项,该多个预设主题选项分别与预先储存在数据库中的多个数据串对应,通过选择...

【专利技术属性】
技术研发人员:王闯
申请(专利权)人:北京一亩田新农网络科技有限公司
类型:发明
国别省市:北京;11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1