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之強大...在真正應用中委實沒什麼大用,不過你要是打算以此"做惡"卻是能夠研究研究...別說我給了你啓發...