使用onMount向元素动态添加类
是指在元素挂载到DOM树后，通过JavaScript代码动态地给该元素添加一个或多个CSS类。这种技术可以实现动态改变元素的样式，增强交互效果。
具体实现方式可以使用以下步骤：
- 在HTML中定义一个需要添加类的元素，可以是div、span等任何HTML元素。
- 在JavaScript中，使用onMount事件监听该元素的挂载事件。
- 在onMount事件处理函数中，使用DOM操作方法（如classList.add()）添加需要的类名到元素上。
这种技术常用于需要根据特定条件或用户交互行为来改变元素样式的场景，例如点击按钮后改变按钮的样式、根据表单输入内容来改变表单的样式等。
腾讯云提供了一系列适用于云计算领域的产品，其中与前端开发相关的产品包括云开发（Tencent Cloud Base，TCB）和静态网站托管（Tencent Cloud Object Storage，COS）。您可以通过以下链接了解更多相关信息：
- 云开发（TCB）：云开发是一套基于云原生架构的后端云服务，提供了前后端一体化开发能力，可快速构建小程序、网站、移动APP等应用。详情请参考：云开发产品介绍。
- 静态网站托管（COS）：静态网站托管是腾讯云对象存储（COS）提供的功能，可将静态网页文件部署到COS上进行访问。详情请参考：静态网站托管产品介绍。
以上是关于使用onMount向元素动态添加类的解释和腾讯云相关产品介绍。
相关·内容
2回答
我有一个动态的组成部分，在其中，我把孩子当作道具。所以道具看起来就像：
interface Props {
...some props
children: React.ReactNode
}
export default Layout({...some props, children}: Props) {...}
我需要访问Layout组件中子元素的大小(高度和宽度)。注意到，孩子来自完全不同的组成部分，并且是与无关的.
我可以如下所示使用布局组件：
<Layout ...some props>
<Child1 /> // I need to know
浏览 9提问于2021-07-30得票数 1
回答已采纳
我不知道标题是否非常准确，想不出更好的解释方法。
假设我们有一个模型：
let model = [
{
"id": 0,
"title": "Apple"
},
{
"id": 1,
"title": "Orange"
},
{
"id": 2,
"title": "Tomato"
},
{
"id": 3,
"title": &
浏览 6提问于2022-06-10得票数 2
回答已采纳
当im使用svelte-kit路由系统时，我可以使用[page].svelte创建动态页面，例如，在调用localhost:3000/foo时会呈现这些页面。但是，当我从localhost:3000/foo导航到localhost:3000/bar时，不调用onMount()函数(我猜是出于性能原因)。
我可以通过在{#key ... }表达式中包装所有相关内容来解决这个问题，但是有任何方法可以“重装”页面吗？
(谢谢你帮助我:)
浏览 3提问于2022-05-25得票数 5
回答已采纳
1回答
我是新手，我正在尝试在Svelte应用程序中使用。我成功地用import LeaderLine from 'leader-line';导入了它，但不幸的是，在包页上给出的示例不起作用：
<script>
import LeaderLine from 'leader-line';
new LeaderLine(
document.getElementById('start'),
document.getElementById('end')
);
</script>
&l
浏览 7提问于2021-03-02得票数 0
回答已采纳
我有一个svelte组件，它使用一个库来显示JSON树，但是这个库需要一个html钩子来加载。然后，它使用自己的类和ids生成自己的html结构。到目前为止一切都很好，但是如果我在我的组件中为将来生成的选择器添加了一些样式，该样式将不会被应用。 这就是问题所在吗？有没有什么工作可以做？ 下面是我的代码示例： <script>
import { onMount } from "svelte";
import { Content } from "@smui/card";
import { copyToClipboard } from
浏览 18提问于2020-01-10得票数 5
回答已采纳
3回答
我希望导入使用"window“属性的apexChart库，并在控制台中得到错误。
[vite] Error when evaluating SSR module /src/routes/prehled.svelte:
ReferenceError: window is not defined
挂载后，我尝试使用apexCharts，但错误没有消失。
<script>
import ApexCharts from 'apexcharts'
import { onMount } from 'svelte'
const myOptions =
浏览 2提问于2021-11-07得票数 12
回答已采纳
我正在做一个基于CSS的自定义动画，如下所示，但我不想在初始渲染时设置动画。起初，我认为我可以很容易地实现这一点，创建一个在挂载时设置的新标志。然而，我不确定如何才能做到这一点，因为我在顶层创建的所有变量在更新时都会导致重新呈现。
我读到在顶层声明的任何东西都会导致在赋值时重新呈现。因此，我被迫在一个函数中创建这个标志，但这样做并不能让我访问HTML中的变量。我如何才能做到这一点？
<script lang="ts">
import { onMount } from 'svelte';
import classname
浏览 0提问于2021-06-18得票数 2
2回答
我试图添加样式到我的AG网格，但到目前为止，我还没有成功。唯一可行的方法是设置库提供的一些css变量，但这是非常有限的。我试着扩展现有的类，但是我总是收到Unused css selector警告，在阅读文档之后，我一直找不到解决方案。
这是我的密码：
<script lang="ts">
import { onDestroy, onMount } from 'svelte';
import { Grid } from 'ag-grid-community';
import 'ag-grid-commu
浏览 31提问于2022-01-29得票数 0
回答已采纳
我有一个svelte项目，在这里我为组件FileSelector.svelte和TableViewer.svelte实现了动态导入。在本地，它可以工作，但当我构建它并将其放入nginx时，它仍然尝试从build目录中不存在的components目录中获取组件。
Codedescription:我有一个数组，其中包含到组件的相对路径。onMount I使用索引0的mainComponentsArray加载组件。当我不再使用其他组件时，我只需要更改currComponent变量
实现动态导入的Svelte代码：
<script>
import { currCompon
浏览 3提问于2022-08-02得票数 0
回答已采纳
我是jquery ui的新手，我正在尝试将一个类添加到jquery ui的选择菜单中。我正在尝试这个，但是它不会出现。有没有人能帮帮我
$('#dd1').change(function () {
var input = $(this);;
if (!input.val()) {
input.selectmenu().addClass("test");
}
else{
input.selectmenu()
浏览 4提问于2013-11-08得票数 1
2回答
你能帮我理解这两个组件之间的区别吗？
REPL：
和onMount:
<script>
import { onMount } from "svelte";
let canRender;
onMount(() => {
setTimeout(() => {
canRender = true;
}, 1000);
});
</script>
{#if canRender}I'm with onMount!{/if}
无：
<script>
let canRender;
浏览 3提问于2020-05-03得票数 4
我一直在尝试将最基本的D3示例放入一个Svelte应用程序中，但无法使其正常工作。首先，我尝试将D3作为节点模块：npm install d3安装，但这会产生与在index.html：<script src="https://d3js.org/d3.v5.min.js"></script>中从CDN导入D3作为外部脚本相同的结果(缺少结果)。无论使用哪种方法，我都会在app start上得到一堆循环依赖警告： (!) Circular dependency: node_modules\d3-selection\src\selection\index.j
浏览 24提问于2019-06-21得票数 4
回答已采纳
2回答
我知道我可以通过使用bind:this获得对DOM元素的引用 <script>
import { onMount } from "svelte";
let root;
onMount(() => {
// root is div
});
</script>
<div bind:this="{root}">
content
</div> 如何获得对组件根元素的DOM节点的引用？ Wrapper.svelte:
<div class="root">
浏览 30提问于2020-07-06得票数 4
我用Svelte和FullCalendar在我前面做了一个日历。我用了这样的代码
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth&#
浏览 12提问于2022-12-02得票数 0
我正在尝试将Ckeditor5添加到Sveltekit中。 使用node模块可以很好地工作。我导入库onMount并使用它。 // Works flawlessly
<script>
import { onMount } from 'svelte';
let Editor;
onMount(async () => {
const module = await import('@ckeditor/ckeditor5-build-balloon-block');
Editor = module.default;
浏览 21提问于2021-11-19得票数 1
我已经在这个问题上工作了一年了，却找不到任何解决办法，所以我什么也没做。
由于最近更新了Svelte或UIKit (遗憾的是，我不知道是哪一个)，它们似乎相互冲突。Svelte似乎想要比以前更积极地控制DOM，这会干扰UIKit的修改。例如，手风琴和网格不能正确显示。
我的网站页脚应该看起来像
，但实际上看起来
所有这些例子以及更多的例子都可以在上看到。重新加载页面时会出现问题。
我试过了
更显式地设置适当的类，这修复了元素的对齐，但是当关闭时，手风琴的内容是可见的(on )。
就此问题与UIKit开发人员联系。我没有得到任何回应。
与Svelte开发人员联系这
浏览 4提问于2022-06-08得票数 1
我正在使用一个外部库(@shopify/ Draggable )，我想告诉draggable当前组件中可拖动CSS类的名称是什么。 onMount(() => {
const droppable = new Droppable(containers, {
draggable: ".draggable",
dropzone: ".dropzone",
});
}); 在其他地方，我定义了一个.draggable样式： <style>
.draggable { ... }
</style>
浏览 59提问于2021-01-02得票数 0
我正在尝试用“活动”类来样式我的web项目的当前活动选项卡。以我正在使用的选项卡元素为目标
onMount(() => {
const links = document.querySelectorAll(".topnav a");
});
然后，我将使用一个反应性语句来为适当的元素设置如下样式
$: {
links.forEach((link) => {
if (link.getAttribute("id") === $page.url.pathname) {
link.clas
浏览 6提问于2022-05-05得票数 1
回答已采纳
我使用d3构造了一个SVG，这取决于页面上的<input>元素的值。我希望SVG在输入值发生变化时进行更新。有简单的。但是，将代码放在onMount中，这似乎破坏了反应性。
下面是一个例子：
<script>
import { onMount } from 'svelte';
import * as d3 from 'd3';
var word = "Hello";
let container;
onMount(() => { d3.select(container
浏览 4提问于2022-08-13得票数 0
回答已采纳
2回答
我有一个反应表组件，显示一些游戏数据。
该组件使用钩子设置状态如下：
const [data, setData] = React.useState([]);
React.useEffect(() => {
gameData(false).then(res => {
setData(res.data);
});
}, []);
在我的表中，我有一个按钮，它通过对api的Put请求添加或删除一行。
我希望它在不执行完整/可访问页面刷新的情况下删除该行。
下面是执行axios请求的代码。
您可以看到，我正在尝试再次使用“setData”来“刷新”数据。
但
浏览 1提问于2020-05-06得票数 1
回答已采纳
1回答
我有困难使用GSAP在我的瘦身项目为基础的网站。我对两个人都比较陌生。我知道svelte有自己的动画库，但我想使用GSAP来实现它的时间线功能。作为一个测试，我试着改变蓝色方块的颜色，但似乎无法使它发挥作用。它要么不改变要么根本不存在。我也安装了GSAP作为依赖项。这是我的App.svelte中的代码：
<script>
import { gsap } from "gsap";
gsap.from(".blue", {color: "#8c0", duration: 1});
</script>
<
浏览 0提问于2020-07-07得票数 0
回答已采纳
我有一个包含动态行和字段的表单。例如，我有这样的结构：
visible div
visible div
hidden div
visible div
使用div:nth-child(odd)和div:nth-child(even)时，它看起来如下所示：
striped
unstriped
unstriped
因为第三个div是不可见的。
如何使用jQuery来确保其基于可见元素而不是不可见元素的条带化？
浏览 1提问于2015-12-19得票数 0
1回答
我想要做的是，盒子里面的背景颜色保持0.5秒的颜色，然后消失。就像单击YouTube注释警报时，框内的背景色会消失。 第一次渲染时 有背景色 ? 0.5秒后背景色消失，如下所示 ? 这是我的代码 const Container = styled.View`
border-bottom-color: lightblue;
`;
const CommentContainer = styled.View`
`;
const SecondCommentCon = styled.View`
`;
const UnserNa
浏览 26提问于2021-03-17得票数 1
回答已采纳
3回答
在测试组件时，我找不到如何调用我的useEffect钩子。
我尝试了几种类似这样的解决方案，但没有奏效：
我的组成部分：
const mapDispatchToProps = (dispatch: IDispatch, ownProps: ITextAreaOwnProps): ITextAreaDispatchProps => ({
onMount: () => dispatch(addTextArea(ownProps.id)),
});
export const TextArea = (props) => {
React.useEffe
浏览 2提问于2020-01-21得票数 3
回答已采纳
假设我有一个名为button.svelte的可重用组件，
<script>
export let text = undefined
</script>
<button>{text}</button>
现在我在另一个组件中重用这个组件，
<script>
import { onMount } from "svelte"
import Button from "./Button.svelte"
let button
onMount(() => {
console.log(button)
浏览 2提问于2021-04-30得票数 3
回答已采纳
1回答
我正在使用SvelteKit构建一个应用程序，并在我的app.html中导入一个外部脚本(苹果的MapKit JS)，如下所示：
<script src="https://cdn.apple-mapkit.com/mk/5.72.88/mapkit.js"></script>
然后，我有一个Map.svelte组件，它使用自己的Airport对象在地图上加载一个点。我省略了与...无关的额外细节
// === Map.svelte ===
<script lang="ts">
import { onMount } from
浏览 4提问于2022-06-21得票数 0
回答已采纳
我在Popup.svelte中有一个简单的弹出式组件 <script>
let hidden = true;
</script>
<button on:click={() => hidden = !hidden}> Pop </button>
<div class:hidden> Extra Content </div>
<style>
.hidden { display: none; }
</style> 我的应用程序中显示了多个这样的功能： <script>
浏览 38提问于2021-03-26得票数 0
回答已采纳
1回答
jQuery动态选择内容
、、、
我有一个包含动态内容的页面。
<div id="content-1">
<div id="subcontent-1"></div>
<i id="delete-1"></i>
</div>
.
.
.
<div id="content-10">
<div id="subcontent-10"></div>
<i id="delete-10"><
浏览 4提问于2015-07-08得票数 0
回答已采纳
1回答
在我编写的代码中，我有一个动态创建的div，带有一个输入框和一个按钮。当它们发生事件时，它们有类似的功能可做，但差别很小。例如，如果单击该按钮，请查找输入值的兄弟级值，并删除div并替换包含新输入的div --a按钮，但如果用户按enter查找$(this).val()并对div执行相同的操作，则函数类似。我希望将这些事件处理程序组合到发生的适当事件中。
我想做这样的事：
$("body").on('click keypress' ,'button input', function(e){
我需要on()中的第二个参数，因为按钮和输入是动态创建的
浏览 1提问于2015-07-13得票数 1
回答已采纳
我正试图用Svelte安装一个pixi.js画布，如下所示。app.view是一个HTML Canvas元素，但我不知道如何用Svelte显示它。
<script>
import * as PIXI from 'pixi.js'
import { onMount } from 'svelte';
let app = new PIXI.Application({
width: 256, // default: 800
height: 256, // default:
浏览 4提问于2019-09-19得票数 2
回答已采纳
6回答
在这种情况下，我需要将一个名为"active“的类附加到一组动态创建的div中。我的问题是，我应该只将类“活动”添加到动态创建的div集合的第一个，而rest没有它。
下面是我的html示例。
<!-- Begin Carousel -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicator
浏览 2提问于2014-04-02得票数 0
回答已采纳
2回答
jQuery动态填充的行
、、、、
这肯定是一个简单的问题，但我找不出它到底是什么。如果在表中显示一行是静态的(硬编码)，并单击它，它将显示模式弹出窗口。但是在这一行下面的行上，-which是通过JQuery Ajax动态填充的，具有相同的类属性，它不起作用。我也不知道原因。
下面是我的表格：
<table class="tblContacts table toggle-circle" data-filter="#searchFilter" data-limit-navigation="5"
data-filter-minimum="1&
浏览 0提问于2014-01-28得票数 0
1回答
将json传递给变量
、、、
我正在使用Svelte onMount抓取json。在onMount语句之外获取返回json有问题。
以下是我如何使用onMount获取JSON的方法：
let testData = [];
onMount(async () =>{
const resp = await fetch('http://localhost:3000/api/tableinfo.json');
testData = await resp.json();
console.log(testData); //Returns me a
浏览 1提问于2020-10-28得票数 0
回答已采纳
我从Sapper ^^开始，尝试使用派生存储来查找和预加载一些图像，如下所示： export const backgroundDatas = derived([id, backgroundsRegistry], ([$id, $backgroundsRegistry]) => {
let datas = $backgroundsRegistry ? $backgroundsRegistry[$id] : null;
if(datas && !datas.preload)
{
datas.preload = new Image()
浏览 16提问于2020-10-17得票数 0
正如标题所述，在SvelteKit中使用SvelteKit时，只有在构建应用程序时才会出现"self是未定义的“错误，并且可以追溯到@pixi/settings模块。我已经试过一切可能的方法来解决这个问题。首先，我用了一个垫片给它一些虚假的信息，但这是行不通的：
if (typeof window === 'undefined') {
globalThis.window = {} as any;
}
if (typeof self === 'undefined') {
globalThis.self = globalThis.window
浏览 19提问于2021-12-14得票数 2
回答已采纳
我只能在display中使用div标记，如在 post响应中提到的那样
<script context="module">
import Viewport from 'svelte-viewport-info'
</script>
<div class="only-portrait">
only visible in Portrait Mode
</div>
<style>
:global(.Landscape .only-portrait) {
浏览 8提问于2022-02-04得票数 0
回答已采纳
有没有一种不用使用JavaScript onMount而使用简单onMount的方法？
如何改进这段代码而不使用onMount？
(我想在用户滚动后的每个内容框上鞋)
<script>
import { onMount } from 'svelte';
onMount(() => {
const boxes = document.querySelectorAll('.content');
window.addEventListener('scroll', checkBoxes
浏览 5提问于2021-08-30得票数 1
回答已采纳
我编写了一个Svelte组件，它使用传单显示地图。组件的下列代码可以工作。
我只是想知道这是一种方法，还是有一种“更正确”或“更聪明”的方式？特别是考虑到await import('leaflet');在loadMap()中的应用，以及从onMount()中的CDN加载CSS的方式。
<script>
import { onMount } from 'svelte';
let map;
onMount(() => {
const link = document.createElement('l
浏览 2提问于2020-04-22得票数 2
回答已采纳
下面的代码动态添加文本框。
var counter = 1;
$("addBtn").click(function(){
if (counter > 5) {
alert('Only 5 text boxes allowed');
return false;
}
var newTextBoxDiv = $(document.createElement('div')).attr('id', 'TextBoxDiv' + counter);
浏览 5提问于2014-04-10得票数 0
回答已采纳
我有一个表单，用户按下一个按钮并动态生成一个表的一行，其中有3列。生成的每一行都被添加到表中，并具有以下形式：
<tr id="1" class="">
<td>
<select id="cmb_articulo_1" name="articulo[]">
</td>
<td>
<input type="text" id="txtcantidad_1" name="txtcantidad[]"
浏览 0提问于2016-11-13得票数 0
回答已采纳
如果div中有足够的宽度，我已经编写了一个组件，该组件将数组中的字符串呈现为div中的跨空间。
调用renderDinos()方法onMount()就像预期的那样工作。从那里开始，我想更新组件，以便在div的宽度发生变化时动态地重新呈现div中的字符串(从数组中添加或减去字符串)。
为了实现这一点，如果组件的宽度发生了变化，我将在afterUpdate()中再次调用afterUpdate()。当onMount()运行时，scrollWidth是恐龙的宽度，因此精确地计算了scrollWidthSum。
当afterUpdate()调用相同的方法时，scrollWidth的初始值为0，而不是恐龙
浏览 4提问于2022-05-06得票数 1
回答已采纳
1回答
我有一个HTML页面，其中许多元素是根据用户的请求动态插入的。这些元素中的每一个都有一个id属性，其中包含一些字符串、一个数字id值和另一个字符串。
示例：budget_budget_alive_elements_attributes_10_unit_value
所以我尝试了下面的选择器：
$("#budget_budget_alive_elements_attributes_\d+_unit_value");
但不幸的是，它不起作用。
一些人使用jQuery选择器的一个扩展来获取这些类型的I，但我也不太幸运。
你能帮我一下吗？给定元素的id值的约束，我如何为它们创建选择器？
浏览 0提问于2014-01-06得票数 0
下面是从用户那里获取输入并将其保存在变量中的组件。我希望当点击submit按钮时，这个值将被更新到另一个组件中。
<script>
import { onMount } from "svelte";
let url=[];
onMount(() => {
onClickGetNotes()
});
async function onClickGetNotes() {
console.log(url.url)
}
</script>
<form on:submit|preventDefa
浏览 4提问于2021-03-18得票数 1
回答已采纳
我试图了解在内部调用函数之后，是否有方法将DOM事件(表单中的事件)转发给父级。
REPL：
如您所见，我在Form.svelte中用<form on:submit|preventDefault={validate}>调用<form on:submit|preventDefault={validate}>。
在此之后，我需要重新分派事件/调用handleOnSubmit()中的父级App.svelte。
有没有一种不用createEventDispatcher的方法
浏览 1提问于2020-08-08得票数 0
在我正在处理的项目的主页上，我有一个相当重的组件。它包括Three.js库和几个实用程序，但只有在发生由用户触发的操作时才会显示。没有必要将其包含在初始下载中，因为它只是为初始加载增加了不必要的权重，并增加了加载时间。
<script>
let optionSelected = false;
const imports = {
component: () => import('./components/Component.svelte'),
};
</script>
<button on:click
浏览 4提问于2020-10-02得票数 3
1回答
使用sapper。尝试创建一个输入，并将2个类“名称边框”分配给动态创建的输入元素。元素已创建，但类未应用。不知道为什么，希望有人能帮我。style部分有两个类"name“和"border”，如果我将它们应用于html中的常规输入，它们将工作并应用于任何像这样创建的输入： <input class="name border"/> 但是使用动态创建的输入，样式类不会添加到创建的元素中。我的简单组件具有以下内容： <script>
import { onMount } from 'svelte';
fun
浏览 24提问于2020-07-21得票数 1
回答已采纳
3回答
我已经尝试过找到的插件，但我不能让它与动态控件一起工作。
还有什么其他的验证器可以和动态控件一起工作？
动态示例：
浏览 2提问于2011-06-07得票数 0
回答已采纳
React-css-modules动态生成类名，以限制使用独立组件时的名称冲突。这太棒了。但是，一旦加载了DOM，并且您需要将一个类作为动画的目标，那么css-module产生的类名就会被分成几个部分随机化。
该怎么做呢？
浏览 3提问于2016-09-10得票数 4
在我看来(我知道我错了)，我在onMount生命周期函数( svelte )中所做的事情也可以在它之外完成。有什么不同吗？或者..。我错过了很大的分数。
<script>
import {onMount} from 'svelte'
function doSomething() {
// ......
// ..........
}
onMount(() => {
function doSomething() {
// ......
// ..........
}
})
<
浏览 1提问于2019-08-05得票数 2
回答已采纳
我无法将jQuery事件绑定到动态创建的列表项。
这是jQuery添加了begin后，btnRemoveItem上的事件不会触发。
$('#btnAddStore').on('click', function(){
(...)
$.ajax({
success: (function(result) {
(...)
var li = jQuery('<li/>', {
'id': object['id']
}).append(&
浏览 2提问于2013-04-17得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
