使用原生js创建自定义标签

  1. 效果图

  2. 代码

    <!DOCTYPE html>
    
<html lang="en">

<head>
    
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>Document</title>
    
</head>

<body>
    
    <div style="height: 100px;"></div>
    
    <popup-info img="img/alt.png" text="提示信息">
    
</body>
    
<script>
    
    class PopUpInfo extends HTMLElement {
    
        constructor() {
    
            super();

            // 创建文本框
    
            var info = document.createElement('span');
    
            info.setAttribute('class', 'info');
    
            // 获取自定义标签的text属性
    
            var text = this.getAttribute('text');
    
            info.textContent = text;

            // 创建图片元素
    
            var imgUrl;
    
            if (this.hasAttribute('img')) {
    
                imgUrl = this.getAttribute('img');
    
            } else {
    
                imgUrl = 'img/default.png';
    
            }
    
            var img = document.createElement('img');
    
            img.src = imgUrl;

            var icon = document.createElement('span');
    
            icon.setAttribute('class', 'icon');
    
            icon.appendChild(img);

            // 创建css样式
    
            var style = document.createElement('style');
    
            style.textContent =
    
            `
    
                .wrapper {
    
                    position: relative;
    
                }
    
                .info {
    
                    font-size: 0.8rem;
    
                    width: 200px;
    
                    display: inline-block;
    
                    border: 1px solid black;
    
                    padding: 10px;
    
                    background: white;
    
                    border-radius: 10px;
    
                    opacity: 0;
    
                    transition: 0.6s all;
    
                    position: absolute;
    
                    bottom: 20px;
    
                    left: 10px;
    
                    z-index: 3;
    
                }
    
                img {
    
                    width: 1.2rem;
    
                }
    
                .icon:hover + .info, .icon:focus + .info {
    
                    opacity: 1;
    
                }
    
            `

            // 创建根元素，作用其实是将分离的css和html聚合起来
    
            var shadow = this.attachShadow({ mode: 'open' });
    
            // 创建一个span标签包裹内容
    
            var wrapper = document.createElement('span');
    
            wrapper.setAttribute('class', 'wrapper');

            // 将创建的style节点追加到影子节点中
    
            shadow.appendChild(style);
    
            // 依次将html按照层级关系添加
    
            shadow.appendChild(wrapper);
    
            wrapper.appendChild(icon);
    
            wrapper.appendChild(info);
    
        }
    
    }

    // 定义组件
    
    customElements.define('popup-info', PopUpInfo);

</script>

</html>

使用原生js创建自定义标签的更多相关文章

  1. 在html中创建自定义标签

    创建并使用自定义标签 Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),本篇介绍使用 CustomElem ...

  2. Vue结合原生js实现自定义组件自动生成

    就目前三大前端主流数据驱动框架(vue,ng,react)而言,均具有创建自定义组件的api,但都是必须先做到事先写好挂载点,这个挂载点可以是原有静态元素标签也可以是自定义模板:对于多种组件通过同一数 ...

  3. javaweb回顾第八篇如何创建自定义标签

    前言:在javaweb开发中自定义标签的用处还是挺多的.今天和大家一起看自定义标签是如何实现的. 1:什么是标签 标签是一种XML元素,通过标签可以使JSP页面变得简介易用,而且标签具有很好的复用性. ...

  4. Spring源码学习-容器BeanFactory(四) BeanDefinition的创建-自定义标签的解析.md

    写在前面 上文Spring源码学习-容器BeanFactory(三) BeanDefinition的创建-解析Spring的默认标签对Spring默认标签的解析做了详解,在xml元素的解析中,Spri ...

  5. Angular JS中自定义标签 属性绑定的解释

    看到自定义标签的文档时,文档作者解释的能力实在太弱,也可能是本人太笨,一下绕不过来. 看了一个stackoverflow答案,才算明白,在此贴出翻译,以供大家参考. .csharpcode, .csh ...

  6. 原生js实现自定义alert风格和实现

    2018年6月29 最新更新 添加函数节流,解决多次点击问题,添加单例模式,提高代码性能. <!DOCTYPE html> <html lang="en"> ...

  7. angular.js创建自定义指令-demo3

    html: <!doctype html><html ng-app="myModule"> <head> <meta charset=&q ...

  8. JS 创建自定义对象的方式方法

    一.概述 还记得刚开始做项目的时候,看到别人封装的js工具类百思不得其解,看来看去看不懂,深挖一下,其实就是自己没有耐下心去看,但是遇到问题不解决,总会遇到的,今天还是遇到了,就去找了找帖子,重新思考 ...

  9. JS创建自定义对象

    普通对象的创建: 创建对象: 1.people = new Object(); people.name = "lin"; people.age = "26“; 2.创建字 ...

随机推荐

  1. MongoDB GridFS——本质上是将一个文件分割为大小为256KB的chunks 每个chunk里会放md5标识 取文件的时候会将这些chunks合并为一个整体返回

    MongoDB GridFS GridFS 用于存储和恢复那些超过16M(BSON文件限制)的文件(如:图片.音频.视频等). GridFS 也是文件存储的一种方式,但是它是存储在MonoDB的集合中 ...

  2. iOS自动化探索（三）WebDriverAgent Python Client

    之前我们在终端试着调用过WDA API, 今天我们在看一个Python封装的api库 https://github.com/openatx/facebook-wda 安装方式(一): pip inst ...

  3. 导出/打印项目数据报表需要设置IE浏览器

    导出/打印项目数据报表需要设置IE浏览器如下: 1.将本地服务器站点设置为可信站点, 2.通过点击网页上的工具→Internet选项→安全→自定义级别→把关于activeX控件和插件的选项都设置成启用 ...

  4. include和application

    include指令 语法:<%@ include  file=”路径+文件名” %> 把指定的文件包含到当前jsp中. application(应用的全局变量) 实现用户之间的数据共享 常 ...

  5. socket编程再分析(-)——基础

    linux 网络编程-基础篇 0.Socket简介 socket接口是TCP/IP网络的API,Socket接口定义了许多函数或例程,程序员可以用它们来开发TCP/IP网络上的应用程序.要学Inter ...

  6. Android 蓝牙 socket通信

    Android中蓝牙模块的使用 使用蓝牙API,Android应用程序能够执行以下功能: 扫描其他蓝牙设备查询本地已经配对的蓝牙适配器建立RFCOMM通道通过服务发现来连接其他设备在设备间传输数据管理 ...

  7. C++将链表反转的实现

    有题目的需求是求将链表反转,例如1->2->3->4->5转变成5->4->3->2->1,经典的是可以有两种解决方法,递归方式和非递归方式,下面给出C ...

  8. Java中数据库连接池原理机制的详细讲解（转）

    连接池的基本工作原理 1.基本概念及原理 由上面的分析可以看出,问题的根源就在于对数据库连接资源的低效管理.我们知道,对于共享资源,有一个很著名的设计模式:资源池 (Resource Pool).该模 ...

  9. kali视频(1-5)

    第二周 kali视频(1-5) 1.kali安装 2.基本配置 vmtools安装过程. 3.安全渗透测试一般流程 4.信息搜集之GoogleHack 5.信息搜集之目标获取 1.kali安装 直接在 ...

  10. NETCore中RabbitMQ的使用

    NET中RabbitMQ的使用 https://www.cnblogs.com/xibei666/p/5931267.html 概述 MQ全称为Message Queue, 消息队列(MQ)是一种应用 ...