介绍一个动态修改Jimdo网站模板CSS样式表的JS代码

      对Jimdo网站有点研究的朋友都知道,通过HTML+CSS做出来的Jimdo模板,其实就是一个单页布局,所以,每一个Jimdo网站,所有页面都是一个面孔。对于这个问题,网上邻居曾做过一些粗浅的探索,写过《如何自定义Jimdo模板(十一) - 利用Content-ID设计出不同的编辑区布局》、《如何自定义Jimdo模板(十二) - 利用Page-ID对基本布局进行版块调整》。这种方法的缺点是,它会造成CSS文件或head部越来越复杂,越来越肿胀。如果只是少量页面的修改,我们完全可以利用JS代码对CSS进行动态修改。

      这个动态修改Jimdo网站模板CSS样式表的JS代码,是飞帆朋友写的,因为他的免费Jimdo网站已经不在了,所以这里将他的代码公布出来,以示纪念。

<div class="scri">
    <script type="text/javascript">
//<![CDATA[
    var style= document.createElement("style"),
    head= document.getElementsByTagName("head")[0],
    css = document.styleSheets[0];
    style.type="text/css";
    var csstext={
    ".scri":"position:absolute;width:1px;height:1px;",
    "#left":"width:960px;background:#fff;",
    "#right":"display:none !important;"
    };
     if(document.createStyleSheet){for(key in csstext){try{css.addRule(key,csstext[key]);}catch(e)
    {}}}else{for(key in csstext){try{style.appendChild(document.createTextNode(key+"{"+csstext
    [key]+"}"));}catch(e){}}}head.appendChild(style);
    //]]>
    </script>
</div>

      上述代码中,红色部分是CSS代码,也就是我们要对当前页面进行定义的代码。它的写法和CSS里有点不同。比如,在CSS里的写法是:

#left{width:960px;background:#fff;}

      而在上述JS代码中,要将它改写为:

 "#left":"width:960px; background:#fff;",

      每一句的后面以逗号(,)结束,最后一句不加任何标点符号。考虑到各种浏览器的兼容性问题,最好在每个值后面加上“!important”。

      具体使用方法是,在当前页面上添加“THML/ Widget”元素,然后将上述JS代码添加进去并保存即可。它的实质是:动态地将CSS加到网站head部的尾部,它不需要知道当前页面的ID,仅对本页有效。

      作为演示,本页就用上述方法,将右栏进行了屏蔽。可以看到,这种方法还是颇具实用价值的。

相关文章:

脚本之家myFocus焦点图在Jimdo网站上的演示 (Sat, 27 Jul 2013)
>> Read More

分享一种Jimdo博客日期/时间显示样式的自定义代码 (Sun, 17 Feb 2013)
>> Read More

介绍一个动态修改Jimdo网站模板CSS样式表的JS代码 (Sun, 03 Feb 2013)
>> Read More

Jimdo“图文混排”元素及其代码演示 (Fri, 25 Jan 2013)
>> Read More

介绍一种完美修改Jimdo网站页脚部分的方法 (Thu, 10 Jan 2013)
>> Read More

无觅“热门文章”插件背景颜色的修改及CSS自定义方法 (Sun, 30 Dec 2012)
>> Read More

分享一种Jimdo博客日期时间显示样式代码 (Thu, 04 Oct 2012)
>> Read More

百度空间背景音乐播放器及其在Jimdo网站上的调用 (Sun, 13 May 2012)
>> Read More

2012年第30届夏季伦敦奥运会开幕倒计时JS代码 (Wed, 18 Apr 2012)
>> Read More

百度空间音乐播放器在Jimdo等博客上的调用方法 (Mon, 09 Apr 2012)
>> Read More

Write a comment

Comments: 8
  • #1

    中国圆号 (Sunday, 03 February 2013 12:51)

    利用jimdo初始CSS代码修改后这样做也不难。

  • #2

    中国圆号 (Sunday, 03 February 2013 13:01)

    这个还有点意思。http://cn.jimdo.com/%E5%BB%BA%E7%AB%99%E5%B8%AE%E5%8A%A9/%E5%BB%BA%E7%AB%99%E6%8C%87%E5%AF%BC/%E7%AB%99%E5%86%85%E6%90%9C%E7%B4%A2%E5%B7%A5%E5%85%B7swiftype/

  • #3

    网型网秀 (Sunday, 03 February 2013 13:15)

    飘过。

  • #4

    龙的传人 (Sunday, 03 February 2013 13:38)

    值得借鉴。

  • #5

    Coach Purses Outlet (Tuesday, 23 April 2013 05:00)

    Love is not a thing to understand
    Love is not a thing to feel
    Love is not a thing to give and receive
    Love is a thing only to become and eternally be

  • #6

    网型网秀 (Friday, 22 November 2013 04:04)

    看到“飞帆”两个字就来气,没有将调用数据库技术分享出来就蒸发了!

  • #7

    网上邻居 (Friday, 22 November 2013 05:56)

    网型网秀:
    当初你不是他的注册会员么,没有学到手真是可惜了...

  • #8

    Chanel iPhone 6 Plus Wallet Cases (Tuesday, 16 June 2015 13:08)

    While the iPhone 6 is still a new device, many users who bought one may be having second thoughts. Either they don’t like the large size of the iPhone 6 or maybe iOS just isn’t for them.