热线:0532-83801234

2019-04-15

网站程序中换肤功能的实现

     在网站建设中偶尔会遇到不太常用的换肤功能,大多数开发人员实现网站皮肤更换功能大致下面两种方法:

1、定义一个全局class来控制样式切换;

2、各皮肤使用不同的样式表,通过改变link元素的href地址来切换不同的皮肤

      以上两种方式均存在弊端,全局class控制样式提高了样式优先级,如果换肤样式很多,代码会非常啰嗦,不利于维护;使用JS改变href属性会带来加载延迟,样式切换不流畅,体验不佳。

实际上,浏览器有原生特性,非常适合实现网站换肤功能。

      此方法借助HTML rel属性的alternate属性值实现。示意HTML如下:

      没有title属性,rel属性值仅仅是stylesheet<link>无论如何都会加载并渲染,如reset.css

      有title属性,rel属性值仅仅是stylesheet<link>作为默认样式CSS文件加载并渲染,如css.css

      有title属性,rel属性值同时包含alternate stylesheet<link>作为备选样式CSS文件加载,默认不渲染,如r.cssg.css

      这里有个非常有趣的特性,那就是rel="stylesheet"<link>如果有title属性并有值,性质上就变成了一个可以控制其渲染或者不渲染的特殊元素了。

要实现换肤功能,只要在页面上方几个换肤按钮,点击的时候改变对应<link>元素DOM对象的disabled值就可以了。

       使用此方法的有点:

1兼容性好。

2语义好。用户,开发者,尤其搜索引擎或者其他辅助阅读设备能够准确识别网站还有其他替换CSS样式。

2交互体验好。rel=alternate方法实现的换肤功能在网站样式变换的时候是瞬间切换,完全无感知。因为浏览器已经把换肤的CSS文件预加载好了,比JS改变href地址的体验要更好。

       东八区品牌创意(青岛)有限公司自2006年成立以来,主要为山东省内各大中小型企业、事业单位、机关等制作网站、提供更专业的网站建设、品牌策划、平面设计和影视制作、活动策划等。以人为本,更好地为企业展示更全面的企业文化,提高企业的知名度和美誉度是东八区一直在坚持的。