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

  1. 效果图

  2. 代码

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Document</title>
    9. </head>
    11. <body>
    12.     <div style="height: 100px;"></div>
    13.     <popup-info img="img/alt.png" text="提示信息">
    14. </body>
    15. <script>
    16.     class PopUpInfo extends HTMLElement {
    17.         constructor() {
    18.             super();
    20.             // 创建文本框
    21.             var info = document.createElement('span');
    22.             info.setAttribute('class', 'info');
    23.             // 获取自定义标签的text属性
    24.             var text = this.getAttribute('text');
    25.             info.textContent = text;
    27.             // 创建图片元素
    28.             var imgUrl;
    29.             if (this.hasAttribute('img')) {
    30.                 imgUrl = this.getAttribute('img');
    31.             } else {
    32.                 imgUrl = 'img/default.png';
    33.             }
    34.             var img = document.createElement('img');
    35.             img.src = imgUrl;
    37.             var icon = document.createElement('span');
    38.             icon.setAttribute('class', 'icon');
    39.             icon.appendChild(img);
    41.             // 创建css样式
    42.             var style = document.createElement('style');
    43.             style.textContent =
    44.             `
    45.                 .wrapper {
    46.                     position: relative;
    47.                 }
    48.                 .info {
    49.                     font-size: 0.8rem;
    50.                     width: 200px;
    51.                     display: inline-block;
    52.                     border: 1px solid black;
    53.                     padding: 10px;
    54.                     background: white;
    55.                     border-radius: 10px;
    56.                     opacity: 0;
    57.                     transition: 0.6s all;
    58.                     position: absolute;
    59.                     bottom: 20px;
    60.                     left: 10px;
    61.                     z-index: 3;
    62.                 }
    63.                 img {
    64.                     width: 1.2rem;
    65.                 }
    66.                 .icon:hover + .info, .icon:focus + .info {
    67.                     opacity: 1;
    68.                 }
    69.             `
    71.             // 创建根元素，作用其实是将分离的css和html聚合起来
    72.             var shadow = this.attachShadow({ mode: 'open' });
    73.             // 创建一个span标签包裹内容
    74.             var wrapper = document.createElement('span');
    75.             wrapper.setAttribute('class', 'wrapper');
    77.             // 将创建的style节点追加到影子节点中
    78.             shadow.appendChild(style);
    79.             // 依次将html按照层级关系添加
    80.             shadow.appendChild(wrapper);
    81.             wrapper.appendChild(icon);
    82.             wrapper.appendChild(info);
    83.         }
    84.     }
    86.     // 定义组件
    87.     customElements.define('popup-info', PopUpInfo);
    89. </script>
    91. </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. vue开发者工具DejaVue

    刚刚在逛github的时候发现了一个vue开发工具觉得很不错,分享给v友们! 地址:https://github.com/MiCottOn/DejaVue 话不多说,直接说操作流程!(前提是node版 ...

  2. 数据挖掘算法Analysis Services-基于SQL Server的数据挖掘

    数据挖掘算法(Analysis Services – 数据挖掘) data mining algorithm is a set of heuristics and calculations that ...

  3. zabbix报警优化

    常见rpc服务介绍 ---远程过程调用协议 常用的框架:阿里巴巴 Dubbo.微博 Motan.阿帕奇 thrift.谷歌 grpc Dubbo 是阿里巴巴公司开源的一个Java高性能优秀的服务框架, ...

  4. 【python】self用法详解

    在介绍Python的self用法之前,先来介绍下Python中的类和实例我们知道,面向对象最重要的概念就是类(class)和实例(instance). 类是抽象的模板,比如学生这个抽象的事物,可以用一 ...

  5. LeetCode OJ：Pascal's TriangleII（帕斯卡三角II）

    Given an index k, return the kth row of the Pascal's triangle. For example, given k = 3,Return [1,3, ...

  6. Activity传递参数——传递简单数据

    一.新建一个空的工程 二.在主界面中添加一个按钮 三.新建一个空的activity,并命名为TheAty 四.修改MainActivity.java中的onCreate函数 protected voi ...

  7. git合并分支与解决冲突

    前提: 当前开发的分支为feature/20161129_317606_algoplatform_1,由于feature/20161130_322574_tmstools_1分支有新内容,所以准备将f ...

  8. 0GDB调试程序进阶

    http://www.cnblogs.com/azraelly/archive/2012/12/22/2829256.html 下面只列举我认为重要的 0.反汇编命令disas/disass/disa ...

  9. MyBatis典型的错误org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)

    XXXmapper.java(接口) XXXmapper.xml(结果集映射) //此两个文件要在统一包下,且xml中的namespace是唯一的,为了区分须写成 该xml的全路径

  10. Java [Leetcode 383]Ransom Note

    题目描述: Given
 an 
arbitrary
 ransom
 note
 string 
and 
another 
string 
containing 
letters from
 al ...