900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 创建html自定义标签 如何为htm创建自定义标签

创建html自定义标签 如何为htm创建自定义标签

时间:2020-06-30 00:43:38

相关推荐

创建html自定义标签 如何为htm创建自定义标签

您可以按照以下步骤创建自定义html标签:

步骤1-注册一个新元素。 使用document.registerElement()创建自定义元素:

var XFoo = document.registerElement('x-foo', {

prototype: Object.create(HTMLElement.prototype)

});

registerElement中的第二个参数是可选对象,它描述元素的原型。

第2步-实例化自定义标签这样做的几种方法:声明它们:

在JS中创建DOM:

var xFoo = document.createElement('x-foo');

xFoo.addEventListener('click', function(e) {

alert('Thanks!');

});

使用新的运算符:

var xFoo = new XFoo();

步骤3-将新创建的元素附加到文档

document.body.appendChild(new XFoo());

完整的例子:

var XFooProto = Object.create(HTMLElement.prototype);

// 1. Give x-foo a foo() method.

XFooProto.foo = function() {

alert('foo() called');

};

// 2. Define a property read-only "bar".

Object.defineProperty(XFooProto, "bar", {value: 5});

// 3. Register x-foo's definition.

var XFoo = document.registerElement('x-foo', {prototype: XFooProto});

// 4. Instantiate an x-foo.

var xfoo = document.createElement('x-foo');

// 5. Add it to the page.

document.body.appendChild(xfoo);

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。