unbelievable! 经过Css调用Js代码?

    一直以来经过javascript操做css都是屡见不鲜,使用起来也没感受什么特殊,若是反其道而行之呢?

    用CSS写出Javascript代码或者说用CSS调用JS代码可行吗?

    答案是能够的,从技术层面上是能够实现的,不过由于安全缘由,限制也比较严重.所幸有所限制,否则估计要变得一团糟啊.目前比较可行的经过CSS执行Javascript的方式有如下几种.若是你还有其余方式,留言给我.

    (1) 经过expression()

    这种方式应该只在IE下才好使,能够书写如:

background: expression(JS code resulting in a vali background image string here)

body {

    width: expression(document.body.clientWidth >  1100)? "1100px" : "auto";

}

    这种方式也就是在CSS的属性值中嵌入JS代码,仅在IE下生效,而且是比较老版本的IE,到底有多老,请自行尝试,我只能说567...IE8下我没有测试,有兴趣的童鞋能够测试完留言给我.

    (2) 经过url在CSS属性中注入

    这种方式就是在好比设置background背景图片的时候,经过url('javascript:...')的方式将Javascript代码注入进去.

    (3) HTC with IE 

    这个不是经过HTC手机实现...这种方式仅在IE下可行,经过CSS调用.htc文件来启用Javascript.

    

# CSS file

body {

  behavior:url(script.htc);

}

# script.htc

<PUBLIC:COMPONENT TAGNAME="xss">

   <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="main()" LITERALCONTENT="false"/>

</PUBLIC:COMPONENT>

<SCRIPT>

   function main() 

   {

     alert("HTC script executed.");

   }

</SCRIPT>

    (4) XBL with Firefox

    用法和上面HTC with IE相似,只不过仅支持Firefox浏览器.

body {

  -moz-binding: url(script.xml#mycode);

}

<?xml version="1.0"?>

<bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml">

<binding id="mycode">

  <implementation>

    <constructor>

      alert("XBL script executed.");

    </constructor>

  </implementation>

</binding>

</bindings>

    这个就是科普一下,让你们知道CSS之强大...在真正应用中委实没什么大用,不过你要是打算以此"做恶"却是能够研究研究...别说我给了你启发...