zoukankan      html  css  js  c++  java
  • CSS+JS;JS+CSS换肤总结

    网上找了段换肤的代码,看了下其实也比较简单,主要就要用到他的GetCookie和SetCookie,其他的就根据自己需求改造了。

    过程中前后遇到了几个问题所以就折腾了一晚上。为什么这些特殊问题都让我遇到。

    我的css文件保存方式是,Skin目录下放置皮肤名文件夹,然后皮肤名文件夹下面都是相同的文件名css内容不同index.css和share.css等。index.css使用@import(share.css)导入共享样式。

    一直调试换肤不成功。后来终于发现,不能动态的使用import样式。

    于是就在页面中写入两个css文件链接。命名id为skin1和skin2,结果还是不成,alert显示skin1.href属性是null。刚才都可以的。然后写代码来比较。发现链接id的末尾是数字,那么都获取不了这个节点。

    于是改名为skina和skinb。通过。

    然后整理代码,归到各自链接文件里去,然后发现换肤后刷新,恢复到默认皮肤去了,没读取到cookie然后看了下变化。原来我把所有的一次运行文件都放到window.onload函数里去的。如果换肤的设置代码在这里执行始终是默认链接的皮肤。

    最终代码如下。

    然后js使用cookie直接双击文件,以文件的访问方式也可以测试换肤,不需要IIS架设站点来访问。

    Header 部分
    <link id="skina" href="Skin/default/index.css" rel="stylesheet" type="text/css">
    <link id="skinb" href="Skin/default/share.css" rel="stylesheet" type="text/css">
    <script src="Scripts/Lib.js" language="javascript"></script>


    切换按钮
    <div id="skin1" onclick="changecss('default')">默认样式</div>
    <div id="skin2" onclick="changecss('blue')">蓝色样式</div>

    因为我的CSS链接都是Skin/default/index.css和Skin/blue/index.css这样的变化,只是两个反斜杠中间的文件目录变化而已。

    所以在setskin函数里用个正则,获取链接id的href属性,并从cookie读取文件夹名来重新设置href属性就可以了。

    lib.js代码

    Code

    SetCookie和GetCookie函数

    Code

    总结:

    1.css里不能通过import方法导入CSS,多个CSS只能加多个链接吧。

    2.html页面中css链接代码命名id里不能有数字

    3.js代码执行要放到链接css代码后面

    4.执行代码不能放到window.onload函数里

    改造原代码

    Code
  • 相关阅读:
    2.Android之按钮Button和编辑框EditText学习
    《DSP using MATLAB》Problem 3.8
    《DSP using MATLAB》Problem 3.7
    《DSP using MATLAB》Problem 3.6
    《DSP using MATLAB》Problem 3.5
    《DSP using MATLAB》Problem 3.4
    《DSP using MATLAB》Problem 3.3
    《DSP using MATLAB》Problem 3.2
    《DSP using MATLAB》Problem 3.1
    《DSP using MATLAB》Problem 2.20
  • 原文地址:https://www.cnblogs.com/zkxp/p/1371478.html
Copyright © 2011-2022 走看看