首页html自定义标签，内含一个文本框，一个按钮，一个点击按钮让文本框变色的事件

html自定义标签，内含一个文本框，一个按钮，一个点击按钮让文本框变色的事件

时间: 2023-10-23 16:16:56 浏览: 113

可以使用以下代码实现： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定义标签示例</title> <script> // 自定义元素类 class CustomElement extends HTMLElement { constructor() { super(); // 创建文本框和按钮 this.textbox = document.createElement("input"); this.textbox.type = "text"; this.textbox.style.marginRight = "10px"; this.button = document.createElement("button"); this.button.textContent = "变色"; // 绑定点击事件处理函数 this.button.addEventListener("click", () => { this.textbox.style.backgroundColor = "yellow"; }); // 添加到自定义元素中 this.appendChild(this.textbox); this.appendChild(this.button); } } // 定义自定义元素 customElements.define("custom-element", CustomElement); </script> </head> <body>  <custom-element></custom-element> </body> </html> ``` 这段代码定义了一个名为“custom-element”的自定义元素，其中包含一个文本框和一个按钮。当按钮被点击时，文本框的背景颜色会变成黄色。你可以将该元素插入到页面中，例如： ```html <body> <custom-element></custom-element>  <custom-element></custom-element> </body> ```

阅读全文