JS ShadowDOM组件修改样式,添加事件
2024-06-11 20:17:00
⏹工具类utils.js
// 修改ShadowDOM样式
function changeShadowDOMStyles(shadowRootElement, styles, insertBeforeSelector) {const root = shadowRootElement?.shadowRoot;if (!root) {return;}// 如果组件中既存的样式和从外部传入的样式一致的话,就不修改组件样式const styleElements = root.querySelectorAll('style');const result = Array.from(styleElements).some(el => el.innerHTML === styles);if(result) {return;}// 创建style标签,并将样式标签添加到shadowDOM中const newStyleTag = document.createElement('style');newStyleTag.innerHTML = styles;/*如果insertBeforeSelector为空的话,默认将创建的style标签插入shadow-root的最底部如果指定了insertBeforeSelector的话,将style标签插入到指定的DOM元素之前*/root.insertBefore(newStyleTag, root.querySelector(insertBeforeSelector));
}// 休眠函数
const waitTime = async (milliseconds) => await new Promise((resolve) => setTimeout(resolve, milliseconds));export {changeShadowDOMStyles,waitTime
}
⏹demo
<!DOCTYPE html>
<html lang="en" md="">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="format-detection" content="telephone=no"><link rel="stylesheet" href="./css/ionic.bundle.css" /><link rel="stylesheet" href="./css/init.css" /><link rel="stylesheet" href="./css/common.css" /><!-- 通过模块的方式加载ionic的js --><script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script><script src="./js/jquery-3.6.0.js"></script><title>日历demo</title><style></style>
</head>
<body><ion-app><ion-fab id="btn-fab" vertical="bottom" horizontal="end" slot="fixed" style="display: none;position:fixed; bottom: 40px;"><ion-fab-button id="btnBack2Top"><ion-icon name="arrow-up-circle-outline"></ion-icon></ion-fab-button></ion-fab><ion-page class="ion-page" id="main-content"> <ion-header mode="md"><ion-toolbar color="primary"><ion-title>demo系统<div class="language"><ion-icon name="globe" size="large"></ion-icon><ion-select id="selLanguage" value="jp" slot="end" interface="popover"><ion-select-option value="jp" selected>日本語</ion-select-option><ion-select-option value="eng">English</ion-select-option><ion-select-option value="zn">中文</ion-select-option></ion-select></div></ion-title></ion-toolbar></ion-header><!-- 各画面的处理部分 --><ion-datetime id="custom-datetime" presentation="date" locale="en-GB"><!-- 参考官方文档,为ion-datetime添加额外的按钮,其中slot指定插槽的名称--><ion-buttons slot="buttons"><ion-button id="confirmBtn">Good to go!</ion-button><ion-button id="cancelBtn">Reset</ion-button></ion-buttons></ion-datetime><ion-datetime presentation="time"></ion-datetime><!-- Fade Footer --><ion-footer><ion-toolbar class="copyright" color="primary">Copyright © Matsudo City, All rights reserved.</ion-toolbar></ion-footer> </ion-page></ion-app>
</body>
<script type="module">/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/1. 本demo使用了ionic的组件,组件均使用了 shadow-root 技术来封装组件2. script标签使用module之后,才能使用import导入模块3. 将修改样式的方法抽取为共通,导入4. ES6的模块,无法在静态html中使用,必须发布之后才能使用,否则会报错5. 可以使用 Live Server 来启动发布html_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/import { changeShadowDOMStyles, waitTime } from './js/utils.js'window.onload = async function() {/*各组件的HTML都是动态加载到页面上让程序休眠50毫秒,否则无法获取到页面的DOM*/ await waitTime(50);// 获取ion-datetime组件的DOM对象const datetimeComponent = document.querySelector("ion-datetime");// 1.⏹⏹⏹从datetime组件中获取出shadowRootconst shadowRoot = datetimeComponent.shadowRoot;// 可以看到shadowRoot对象中的各个属性console.dir(shadowRoot); /*shadowRoot相当于主DOM中的子DOM获取子DOM中的元素,需要再次使用选择器*/ const nodeList = shadowRoot.querySelectorAll(".calendar-month-grid");console.log(nodeList);// 从shadowDOM中获取出今天的日期对象const activeDay = shadowRoot.querySelector(".calendar-month-grid > .calendar-day-active");console.log(activeDay);// 2.⏹⏹⏹为今天的日期绑定单击事件$(activeDay).click(function(event) {console.dir(event);const {target: {innerText}} = event;alert(`今天的日期是${innerText}号`);})// 3.⏹⏹⏹修改组件中的样式
JS ShadowDOM组件修改样式,添加事件相关推荐
- vue修改config后怎么生效_vue组件中修改样式怎么不生效？
vue组件中修改样式怎么不生效?下面本篇文章给大家介绍一下vue组件修改样式不起作用的解决方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vue组件修改样式不起作用 需要在全局 ...
- Vaadin学习笔记——自定义vaadin组件的样式
在开始阅读本文之前,你需要先了解以下内容: CSS相关知识(如选择器.如何编写CSS rule等) HTML相关知识(元素.class属性.DOM层级结构等) Vaadin相关知识(如怎样创建.运行V ...
- js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性 修改属性值、js 获取子元素、js 改变css样式
参考书籍:<JavaScript DOM编程艺术 第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点 一份document ...
- js样式会覆盖html样式,js实现html节点、CSS样式、事件的动态添加以及html覆盖层的添加...
(一)js实现html节点.CSS样式.事件的动态添加 ①场景描述:我们需要动态获取后台数据并将这些数据以列表方式展示,其中列表存在自己的列表样式,每个item都存在自己的点击事件.....那么在这种 ...
- Vue.js 之 组件-监听子组件事件
1.监听子组件事件 前面介绍了父组件如何通过 prop 向子组件传递数据,反过来,子组件如何向父组件通信呢? 在 Vue.js 中,这是通过自定义事件来实现的,子组件使用 $emit() 方法触发事件 ...
- JS事件冒泡机制和兼容性添加事件
本篇文章主要来讲讲 事件的冒泡机制 和 添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段 捕获阶段是指从父层往子层找.比如 <body> ...
- ASP.NET自定义控件组件开发 第三章 为控件添加事件 后篇
第三章 为控件添加事件 后篇 前一篇文章只是简单的说了下事件,但是大家应该方法,在ASP.NET自定义控件中只是简单那么定义事件是行不 通.如果大家开发的是WinForm中的事件,之前的定义可能没有什 ...
- wxml修改样式_微信小程序 动态绑定事件并实现事件修改样式
微信小程序 动态绑定事件并实现事件修改样式 实例代码 wxml {{item.name}} js var reportTypeList = [ { name: "日报1", id: ...
- 根据条件动态修改element 组件深层次样式
开发前提: vue elementUI 在开发中有时候 element 中我们使用的某个组件的样式不符合我们的需求,直接写行内样式,有时候会发现并不会生效,直接将样式写在 style 标签中虽然样式会 ...
- ionic 修改组件默认样式_开源Magpie：组件库详解
开源项目专题系列(八)1.开源项目名称:magpie_fly2.github地址: https://github.com/wuba/magpie_fly 3.简介:magpie_fly 是58集体出品 ...
最新文章
- 曝光丨探访哈工大机器人的秘密基地（图）
- easyui 添加 自定义图标
- 在windows上搭建react-native的android环境
- 2021阿里云开发者大会｜【云原生数据库：一站式数据服务】分论坛即将开启
- Mac android studio升级时提示 :Connection failed. Please check your network connection .
- 浙江省高等学校计算机等级考试有什么用,06秋年秋浙江省高等学校计算机等级考试试卷(三级数据库技术及应用)...
- 计算机英语讲课笔记07
- 2012-8-1复选框全选
- 最好用的杀毒软件avast!antivirus加免费注册码！
- 蓝桥杯历年（省赛）试题汇总及试题详解
- CAD曲线快捷键是什么？CAD画曲线教程
- php codesniffer 安装,phpstorm安装PHP_CodeSniffer
- 心理正常与异常的区分_判断心理正常异常三原则
- SpringBoot的ResultFul增删改查
- 理解深度学习中的正则化
- 【Java设计模式】组合模式
- Python中Tkinter模块的Canvas控件绘制jpg图片到指定区域
- Aspose.PDF 23.1.0 for .NET Crack
- iOS判断机型是否为iPhone11/iPhone11 Pro/iPhone11 Pro Max
- 全国高校cct联合计算机考试,全国高校CCT联合考试系统剖析
热门文章