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之强大...在真正应用中委实没什么大用,不过你要是打算以此"作恶"倒是可以研究研究...别说我给了你启发...