gpt4 book ai didi

JavaScript 向所有 "visible"元素添加方法

转载 作者:行者123 更新时间:2023-11-30 10:52:02 25 4
gpt4 key购买 nike

我已经在代码中淡入淡出。没关系,它正在工作。我知道有更好的选择(如 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>

最佳答案

您必须扩展 HTMLElement.prototype 才能拥有这些方法,但是它在所有浏览器中的支持不一致,这就是创建 jQuery 的原因 - 提供一致的抽象接口(interface)包装器,为 DOM 元素提供神奇的方法,如 fadeIn

所以你可以

  • 尽量为支持的浏览器扩展HTMLElement.prototype,忽略IE之类的,尽量在现代浏览器中实现一致性
  • 尝试始终支持所有浏览器的 HTMLElement.prototype 扩展
  • 尝试模仿 jQuery 之类的界面
  • 使用jQuery

如果纯粹是为了学习目的,那就继续尝试吧。如果它用于生产,我会推荐后者(使用 jQuery),或者不尝试使用该原型(prototype)调用语法。

关于JavaScript 向所有 "visible"元素添加方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4717883/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com