Question

我已经淡化了代码。没关系，它正在发挥作用。我知道有更好的选择（比如JQuery），但我想学习。我已经阅读过JQuery的代码，但我没有得到它。我想将我的淡入淡出代码（作为方法）添加到每个可见元素（div，span，p等等）。所以，我希望能够通过这种方式调用fadeIn：

var div = document.getElementById('div');
...
div.fadeIn(500);
span.fadeIn(50);

我怎么能这样做？谢谢。

更新：我的新代码适用于Firefox和Google Chrome。非常感谢你！

<html>
    <head>
        <title>Fade In</title>
        <style type="text/css">
        div#d {
            color: #fff;
            background: #000;
            margin: 0 auto;
            text-align: center;
            padding: 5px;
            width: 500px;
        }
        </style>
    </head>
    <body>
        <div id="d">
            <p>Div</p>
        </div>
        <script type="text/javascript">
        HTMLElement.prototype.fadeIn = function(milliseconds) {
            var intervalID = null,
                self = this;

            if(!this.style.opacity) {
                this.style.opacity = 0;
            }

            intervalID = window.setInterval(function() {
                /* Replace call == Google Chrome fix */
                var opacity = parseFloat(self.style.opacity.replace(',', '.'), 10);

                if(opacity < 1) {
                    opacity += 0.1;
                    self.style.opacity = opacity.toString();
                }
                else {
                    window.clearInterval(intervalID);
                }
            }, milliseconds);
        }

        document.getElementById('d').fadeIn(100);
        </script>
    </body>
</html>

Answer 1

你必须扩展HTMLElement.prototype以获得这些方法，但是在所有浏览器中都不一致地支持它，这就是为什么jQuery是以开头创建的 - 提供一个一致的抽象接口包装器，它为DOM元素提供了像fadeIn这样的神奇方法。

所以你可以

尝试为支持它的浏览器扩展HTMLElement.prototype并忽略IE等，并尝试在现代浏览器中实现一致性
尝试并失败，始终支持所有浏览器HTMLElement.prototype的扩展
尝试模仿jQuery的界面
使用jQuery

如果严格用于学习目的，请继续尝试。如果它是用于生产用途，我会推荐后者（使用jQuery），或者不尝试使用该原型调用语法。

JavaScript为所有“可见”元素添加方法

1 个答案: