如何在HTML元素上创建函数，而不是将元素作为参数传递

How to create a function on HTML element instead passing element as parameter

本文关键字：元素 参数传递 函数 HTML 创建      更新时间：2023-09-26

我有一个函数，它接受元素作为参数，这个元素将用于执行函数内部的操作。

function center(element) {
   // code to align this given element to center position
   element.css("position","fixed");
   element.css("top", Math.max(0, ((window.innerHeight - element[0].offsetHeight) / 2))+ "px");
   element.css("left", Math.max(0, ((window.innerWidth - element[0].offsetWidth) / 2))+ "px");
   return element;
}
// calling above function
center(element);

此处元素作为参数传递。但我不想那样做。是否可以创建一个将在元素上调用的函数？示例

element.center();

您还可以考虑jQuery函数，如：$(element).next();等

注意，我不想使用jQuery。我需要纯javascript编码。

通过使用jQuery，可以创建以下

中心功能

jQuery.fn.center = function () {
   this.css("position","absolute");
   this.css("top", Math.max(0, (($(window).height() - this.height()) / 2)   + $(window).scrollTop())+ "px");
   this.css("left", Math.max(0, (($(window).width() - this.width()) / 2) + $(window).scrollLeft())+ "px");
   return this;
};

您可以向Node对象的原型添加一个函数：

Node.prototype.center = function() {
    // code to align this given element to center position
    this.css("position","fixed");
    this.css("top", Math.max(0, ((window.innerHeight - element[0].offsetHeight) / 2))+ "px");
    this.css("left", Math.max(0, ((window.innerWidth - element[0].offsetWidth) / 2))+ "px");
    return this;
}

这将允许您在任何节点上调用.center()。

注意：定义原型函数时，this是调用函数的对象（在本例中为Node）。

通过向element对象添加名为center的原型，您将能够在element上调用center方法。

参考文献

Javascript中的原型：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

相关文章：