JavaScript 将方法添加到所有“可见”对象中。元素
我已经在代码中实现了淡入淡出。没关系，它正在工作。我知道有更好的选择（如 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>
I've made my fade in code. It's ok, it's working. I know that there are better alternatives (like JQuery) but I want to learn. I've read JQuery's code but i don't get it.
I want to add my fade in code (as a method) to every visible element (div's, span, p, etc...).
So, I want to be able to call fadeIn by this way:
var div = document.getElementById('div');
...
div.fadeIn(500);
span.fadeIn(50);
How could I do that?
Thank you.
UPDATE:
My new code is working in Firefox and Google Chrome. Thank you very much!
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您必须扩展
HTMLElement.prototype才能拥有这些方法，但是所有浏览器对它的支持不一致，这就是创建 jQuery 的原因 -提供一致的抽象接口包装器，为 DOM 元素提供诸如fadeIn之类的神奇方法。因此，您可以
HTMLElement.prototype而忽略 IE 等，并尝试在现代浏览器中实现一致性HTMLElement 的扩展。适用于所有浏览器的原型如果它只是出于学习目的，那么请继续尝试。如果用于生产用途，我建议使用后者（使用 jQuery ），或者不尝试使用原型调用语法。
You would have to extend the
HTMLElement.prototypeto have these methods, however it is inconsistently supported throughout all browsers, which is the reason why jQuery was created to begin with - to provide a consistent abstracted interface wrapper which gives magical methods likefadeInto DOM elements.So you can
HTMLElement.prototypefor browsers that support it and ignore IE and the like, and try to achieve consistency in modern browsersHTMLElement.prototypefor all browsersIf it's strictly for learning purposes then go ahead and attempt. If it's for production use, I would recommend the latter ( using jQuery ), or not attempting to use that prototypal invocation syntax.