js实现单一html页面两套css切换代码,使用jQuery实现Web页面换肤功能的要点解析

时间: 2019-08-13阅读: 313标签: 网站

运用jQuery完成Web页面换肤作用的中央思想深入分析,jqueryweb

网页换肤是一门老技巧了,老的现行都稍稍流行了。可是,有时候有个别客商正是想要那么些换肤功效。于是就实行做了眨眼之间间网页换肤,结果遇见了点不清题目。

网页换肤的基本原理

基本原理很简短,正是运用 JS 切换对应的 CSS 样式表。譬如导航网址 Hao123 的右上方就有网页换肤功效。除了切换 CSS 样式表文件之外,经常的网页换肤还亟需通过 Cookie 来记录顾客早前改造过的四肢,那样后一次顾客访谈的时候,就足以自行使用上次客户配置的选项。

那就是说基本职业流程就出来了:访谈网页——JS 读取 Cookie ——如果未有,使用暗中认可四肢——假设有,使用钦赐四肢;客商点击换肤选项——JS 控制替换对应的 CSS 样式表——将肌肤选项写进 Cookie 保存。

网页换肤事情未发生前要求的策画

先是你大概要粮草先行粮草先行多套 CSS 样式表文件,当点击换肤按键的是,使用 JS 来切换对应的 CSS 样式表。之后,正是在网页上平添三个 ul li 列表,用 CSS 修饰一下做成换肤选项。举个例子:

图片 1

下边大家就来看现时效果代码。

贯彻点击切换对应 CSS 功用

率先,大家的皮层选项的 HTML 结构是那般的

<div class=”skin”>
  <ul>
    <li class=”skin1 hover”></li>
    <li class=”skin2”></li>
    <li class=”skin3”></li>
    <li class=”skin4”></li>
  </ul>
</div>

然后在网页的最上端偏下的职分放上一个空的 link 标签,大家将会利用 jQuery 为这么些 link 标签授予分歧的 CSS 文件落实切换效果

复制代码 代码如下:
<link rel=”stylesheet” href=”” data-href=”style-Teal.css” type=”text/css” media=”screen” class=”skincsslittle” />

内部,小编自定义了二个 data-href 属性来存放系统默许的四肢,那样当页面加载成功未来,假如 JS 未有检查实验到 Cookie 中的四肢新闻,就能够把 data-href 中的内容赋值上去。之后即是大家熟习的 jQuery 代码:

jQuery(‘.skin li').click(function(){
  var currentClass = jQuery(this).attr(‘class');
  jQuery(this).siblings().removeClass(‘hover');
  jQuery(this).addClass(‘hover');
  var cc = currentClass.substring(0,5);
  cc = convertcsslittle(cc);
  var skincssurl = jQuery(‘.stylecssurl').attr(‘href').substring(0,jQuery(‘.stylecssurl').attr(‘href').indexOf(‘style')) + cc;
  jQuery(‘.skincsslittle').attr(“href”,skincssurl);
createCookie('skin',currentClass,365);
});

粗粗的逻辑就是收获到当下四肢的 class 然后截抽取来 skin* 然后经过一个函数获得其对应的 CSS 文件。skincssurl 记载的是网页的非四肢CSS 文件,首要用来取安妥前网页的 CSS 目录 UTiggoL ,最终将交织好的 CSS 皮肤文件赋值酌量好的空 link 中,达成换肤。

扩大 Cookie 记录四肢效能

那边主要用到三个自定义的函数,用来创立、读取 Cookie 内容。

function readCookie(name) {
 var nameEQ = name + “=”;
 var ca = document.cookie.split(‘;');
 for(var i=0;i < ca.length;i++) {
  var c = ca[i];
  while (c.charAt(0)==' ‘) c = c.substring(1,c.length);
  if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
 }
 return false;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days2460601000));
var expires = “; expires=”+date.toGMTString();
}
else expires = “”;
document.cookie = name+”=”+value+expires+”; path=/“;
}

您只必要把那五个函数复制到 JS 代码区域就能够。在 jQuery 点击换肤的功用代码中,最后一句就创办了一个Cookie,等网页加载成功之后,我们供给接纳 JS 读取 库克ie 内容,然后使用 if 剖断:

var cccc = readCookie(“skin”);
if (cccc){
cccc = cccc.substring(0,5);
jQuery(‘.'+cccc).addClass(‘hover').siblings().removeClass(‘hover');
ccc = convertcsslittle(cccc);
var skincssurl = jQuery(‘.stylecssurl').attr(‘href').substring(0,jQuery(‘.stylecssurl').attr(‘href').indexOf(‘style')) + ccc;
jQuery(‘.skincsslittle').attr(“href”,skincssurl);
}else{
var currentcss = jQuery(‘.skincsslittle').attr(“data-href”);
var currentcssname = currentcss.substring(currentcss.indexOf(‘style'),currentcss.length);
currentcssname = defaulttoclass(currentcssname);
jQuery(‘.'+currentcssname).addClass(‘hover').siblings().removeClass(‘hover');
jQuery(‘.skincsslittle').attr(“href”,jQuery(‘.skincsslittle').attr(“data-href”));
}

并不是被如此乱的代码吓晕了,实际上逻辑相当的轻巧,先拿到 Cookie 的四肢值,若是有就为对应的肌肤选项高亮况兼转变获得相应的 CSS 四肢文件赋值。若无 库克ie 内容,就将 data-href 属性中记录的值赋值进去。

网页换肤的闪光难点和不完美建设方案

网页换肤中,会遇上闪烁的主题材料。正是当点击切换按键的时候,更动颜色依旧图片会闪烁一下。大概应用 Cookie 记录之后,客户采纳了非暗中同意的身躯,也会闪烁一下,先现身暗许的体制然后再闪烁切换来用户本身筛选的体裁。

这种影响用户体验的风貌分明要深透消除,不过平素未有找到完美的缓慢解决办法。因为浏览器暗许的是先行渲染 CSS 之后再加载 JS,特别是选拔 Cookie 记录的皮层,先渲染现成的 CSS 之后,JS 本事读取然后切换成肌肤。原理是这么的,跟客商协商之后,客商提交了一个“无闪烁”的换肤效果示例,是 MG12 很早的豆蔻梢头款主旨。同样的 库克ie 记录等,可是他的作品着实并未闪烁情形。

于是乎小编就翻开了他的 JS 代码,没有察觉非常之处,后来才想知道,这种闪烁难题,在图片比很多的网页中效能进一层分明,因为切换的 CSS 要求加载图片须求更加多日子。而 MG12 那款主题中,切换的 CSS 文件只是退换了多少个 background 颜色,加载速度快到您眼球反应不卷土重来就造成了不闪烁的假象。

不圆满建设方案也是局地,点击切换开关之后的闪亮意况,也是因为要加载图片等,那么大家能够在拜访网页的时候,使用预加载手艺将别的四肢图片预加载大概使用 CSS Coca Cola 本领做成一张大图片。

有关 库克ie 记录闪烁的难点,这是浏览器渲染的硬伤,只可以尽量减少换肤必要改变的地点,尽量压缩图片减小体量。然后优先加载未有其他四肢的基本功样式,之后接纳JS 加载暗中认可样式可能读取 Cookie 获取的皮层选项。那样管理,访谈网页的时候会先出示粉红白恐怕无面色,之后平素切换来以前接受的皮层的水彩,而不会从暗许的颜料闪烁产生另少年老成种颜色从而升高确定的客户体验。

网页换肤是一门老才能了,老的现行反革命都有一点流行了。然而,不时候有个别客户便是想要那...

前些天研讨了须臾间JS的用setAttribute方法达成叁个页面两份样式表的效应,具体方法如下:
第一步:在三回九转样式表的因素里定义几个id,举例

1、达成网址换肤效用,日常最初想到的是用全局class调整样式切换短处:全局调控CSS,在档次一点都不大,换肤样式相当少的事态下,还是能免强够用。不过换肤样式相当多来讲,代码会特别丰腴,不方便人民群众维护。

复制代码 代码如下:

2、切换引入CSS样式的href属性值,来达到切换样式的指标。

<link href=”1.css” rel=”stylesheet” type=”text/css” id=”css”>

link rel="stylesheet" href="./skin/skin.css" document.querySelector(‘#skin‘).href = ""

本身定义的id是css。
其次步:写二个js函数,代码如下:

破绽:使用JS改造href属性会带动加载延迟,样式切换不流利的弊病。

复制代码 代码如下:

3、通过JS替换CSS文件中换肤样式的属性值来促成换肤。

<script type=”text/javascript”>
function change(a){
var css=document.getElementById(“css”);
if (a==1)
css.setAttribute(“href”,”1.css”);
if (a==2)
css.setAttribute(“href”,”2.css”);
}
</script>

体制多的话代码会丰腴,样式切换不流畅

其生机勃勃函数的code能够放在页面包车型大巴别的省方。
其三步:为转移页面包车型地铁样式表的接连增添三个函数的触发事件,代码如下:

症结:IE宽容性差

复制代码 代码如下:

4、在读书CSS MDN的时候,发掘link标签的rel属性有叁个alternate属性值能够实现调控CSS加载。

<a href=”#” onClick=”change(1)”>1.css</a>
<a href=”#” onClick=”change(2)”>2.css</a>

4.1、没有title属性,rel属性值仅仅是stylesheet的link会暗许加载并渲染4.2、有title属性,rel属性值仅仅是stylesheet的link作为暗中同意样式CSS文件加载并渲染,如:theme-default.css4.3、有title属性,rel属性值相同的时间包罗alternate stylesheet的link作为预备样式,CSS文件会加载但默许不渲染。如:theme-wsjd.css

该意义在IE和FF下均测量检验通过,相信我们看完后因该特别清楚,利用那个点子大家能够让浏览者自身筛选须要出示的样式表,比如年老者能够筛选叁个字体超大的样式表。这里须要潜心的两点是:
在这里个事例中等学园函授数名function前面包车型大巴名字无法为links可能link,假使为links也许link,样式表将不被改造,具体如何原因作者也非常的小清楚,大概是javascript的保留字符。
别的假诺是改良总体页面包车型地铁体制,你要求在样式表文件里定义body的可观为100%

alternate是八个可怜有趣的性状,大家可经过JS调控该CSS是还是不是渲染,使用JavaScript修改link,成分DOM对象的disabled值为false,能够让私下认可不渲染的CSS伊始渲染,设为true则不渲染。

方法二:
首先步:导入两套css文件

复制代码 代码如下:

<link rel="stylesheet" type="text/css" title="样式A" href="css/people1.css" />
<link rel="alternate stylesheet" type="text/css" title="样式B" href="css/people2.css" />

其次步:写切换的js函数

复制代码 代码如下:

<script type="text/javascript">
var title = "样式A";
function setStyle(){

//只是样式A 和体裁B切换
if(title=="样式A"){
title = "样式B";
}else{
title = "样式A";
}

var i,links;
//用dom方法得到具备link成分
links = document.getElementsByTagName("link");
//推断每一种link成分中是否带有style字符串 ,用来判别此link成分为样式表link ,同期决断此link是还是不是包罗title属性
for(i=0; links[i]; i++){
if(links[i].getAttribute("rel").indexOf("style") != -1 && links[i].getAttribute("title")){
//把所有link设为disabled
links[i].disabled = true;
//再来判别title中是否有钦命的title字符串 有则把当下的link设为可视 即激活当前的link
if(links[i].getAttribute("title").indexOf(title) != -1){
links[i].disabled = false;
//alert("ok");
}

}
}
}
</script>

其三步:在html标签中调用切换的js函数

复制代码 代码如下:

<a href="#" onclick="setStyle();" >1</a>
<a href="#" onclick="setStyle();">2</a>
<a href="#" onclick="setStyle();">3</a>
<a href="#" onclick="setStyle();">4</a>
<a href="#" onclick="setStyle();">5</a>

第一步:在接连样式表的因素里定义三个id,举个例子 复制...

本文由澳门威斯尼人平台登录发布于Web前端,转载请注明出处:js实现单一html页面两套css切换代码,使用jQuery实现Web页面换肤功能的要点解析

相关阅读