两个有意思的问题~~

问题1：
请问IE滤镜起作用的时间为什么和 style的其它属性不同呢？以下是一个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title></head>
<body>
    <form id="form1" runat="server">
<div id="test" style="background-color:red; height:50px; width:50px;  filter:alpha(opacity=60); ">asdasdasdasd</div>
    </form>
     <script>
        var test = document.getElementById('test');
      
     
        alert('1');
        alert('2');
</script>
</body>
</html>
执行结果是：弹出窗口“1”，弹出窗口“2”，此时元素还没有变半透明，之后再按第二个窗口的确定之后，元素才变成半透明。现在把上面的代码改成如下，在onload的时候执行弹出窗口脚本：
<script>
    window.onload = function() {
        var test = document.getElementById('test');
        alert('1');
        alert('2');
    }
</script>
这样的话，滤镜在窗口弹出之前已经起作用了，显示出半透明效果。这个实验是否可以证明，即使滤镜写在style属性里，它也不是和style的其它属性一起起作用，而是在页面的脚本执行后，onload前的这段时间间隔里起作用呢？请指教！~谢谢~~~~问题2：用滤镜可以实现垂直翻转元素，但是不能兼容非IE浏览器，请教兼容所有浏览器方案。请指教！~谢谢~~~~

解决方案 »

  1.   

    滤镜和表达式都是IE only的东西。当然他们都是需要浏览器内核运算的  优先级和JS差不多吧
    表达式其实就是JS
      

  2.   

    个人认为：style的属性应该是在 body 页面完全载入后才起作用的。所以，js的代码执行完毕了，其实页面还是没有被完整载入。尝试一下在script标签里加 defer ，即<script defer> 试一试
      

  3.   

    不是噢~~~style属性里的color之类的，是在窗口弹出之前已经起作用了，但是唯独是滤镜会在窗口弹出后才起作用~~
      

  4.   

    对于问题1，页面没有完全渲染完前有些样式不起作用是正常的
    对于问题2. 其他浏览器直接用canvas吧
      

  5.   

    有一个新发现:
    在弹出窗口前加这两个:        var d = document.getElementById("test");
            d.filters[0].apply();
            d.filters[0].play();滤镜就可以在窗口弹出前起作用了,原来可以手动控制滤镜作用时间的!!
    不知道我的理解对不..
      

  6.   

    看了下..发现canvas好像是用来画图的吧..?
      

  7.   


    你了解不够深入
    https://developer.mozilla.org/cn/Canvas_tutorial看看里面的使用图像和变型