使用原生js自定义内置标签
2024-08-30 06:13:07
使用原生js自定义内置标签
效果图
代码
<!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>
<article contenteditable="" id="textbox">
我是文字
</article> <p is="word-count"></p>
</body>
<script>
class WordCount extends HTMLParagraphElement {
constructor() {
super(); var wc = document.getElementById("textbox"); function countWords(node) {
var text = node.innerText || node.textContent
console.log(text, text.length)
return text.length;
}
var count = '字数: ' + countWords(wc); // 创建影子节点
var shadow = this.attachShadow({ mode: 'open' }); // 创建要给span标签,展示文字个数
var text = document.createElement('span');
text.setAttribute('class', 'text');
text.textContent = count; var style = document.createElement('style');
style.textContent =
`
.text{
color: green;
font-size: 25px;
}
` // 将文字添加到影子节点中
shadow.appendChild(style);
shadow.appendChild(text); // Update count when element content changes
setInterval(function () {
var count = '字数: ' + countWords(wc);
text.textContent = count;
}, 200) }
} // Define the new element
customElements.define('word-count', WordCount, { extends: 'p' }); </script> </html>
最新文章
- 第14章 Linux启动管理(1)_系统运行级别
- PHP 替换标签和标签内的内容
- ZT 理解 Android 上的安全性
- 用手机地图GPS导航费流量吗?
- error: unknown field &#39;ioctl&#39; specified in initializer
- 007-python基础-pyc是什么
- 【转载】C++——CString用法大全
- 火星02坐标转换为WGS84坐标
- Single Number 解答
- JDK6、Oracle11g、Weblogic10 For Linux64Bit安装部署说明
- ubuntu auto mount自动挂载硬盘
- ruby中如何直接编译运行C代码
- qml demo分析(customgeometry-贝塞尔曲线)
- maven中央仓库、远程仓库地址
- P2P互联网金融企业的四大转型方向
- GO语言的进阶之路-初探GO语言
- OpenGL and Vulkan resources
- Oracle查询前几条数据的方法
- 如何运行简单的scrapy
- P1821 [USACO07FEB]银牛派对Silver Cow Party
热门文章
- STL标准容器特征
- H5手机端按钮点击一次却触发了多次点击事件
- jfinal微信支付
- 服务器(Ubuntu 12.04 LTS)上编译基于OpenCV的项目遇到的问题及解决方案
- Java.lang包的接口解读
- Python编码错误的解决办法SyntaxError: Non-ASCII character &#39;\xe5&#39; in file
- GoogLeNet 神经网络结构
- Kali Linux安装SSH Server
- django配置静态文件
- fn project AWS Lambda 格式 functions