首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当Css类发生变化时运行函数

当CSS类发生变化时运行函数,可以通过监听CSS类的变化来触发相应的函数执行。在前端开发中,可以使用MutationObserver来实现这个功能。

MutationObserver是一个用于监听DOM树变化的API,可以观察到节点的添加、删除、属性变化等操作。通过监听目标元素的class属性的变化,当class发生变化时,可以执行相应的函数。

具体实现步骤如下:

  1. 创建一个MutationObserver对象,传入一个回调函数作为参数。
  2. 使用observe方法开始监听目标元素的变化,传入目标元素和一些配置选项。
  3. 在回调函数中,判断变化类型是否为attributes(属性变化),并且判断属性名是否为class。
  4. 如果是class属性发生变化,则执行相应的函数。

示例代码如下:

代码语言:txt
复制
// 目标元素
const targetElement = document.getElementById('target');

// 创建MutationObserver对象
const observer = new MutationObserver(function(mutationsList) {
  for(let mutation of mutationsList) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
      // class属性发生变化,执行相应的函数
      myFunction();
    }
  }
});

// 开始监听目标元素的变化
observer.observe(targetElement, { attributes: true });

// 目标元素的class发生变化时会触发该函数
function myFunction() {
  console.log('Class changed!');
  // 执行其他操作
}

这样,当目标元素的class属性发生变化时,就会触发myFunction函数的执行。

推荐的腾讯云相关产品:无

参考链接:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

当css属性width设为100%时

平常在写页面html代码时,经常会使用到width:100%来使控件宽度为父控件的内容宽度。但如果父控件为body,而且没有明确设置body的宽度,那么就会出现以下的情况了。  ...浏览器宽度调到出现水平滚动条时: ? 使用水平滚动条,浏览右边部分时: ? 结果右边没有灰色背景。...分析:在没有明确设定body的宽度时,body的宽度就是浏览器可显示区域的宽度,上面的例子中可显示区域的宽度明显小于1000px,也就是说body的宽度远远小于1000px。...所以body下的控件宽度被设为100%时,也只能是等于或小于浏览器可显示的宽度。 解决方法: 1.body设定明确的宽度。 2.如果body不能设定明确的宽度。

1.4K50
  • CSS :where 和 :is 伪类函数是什么?

    :is() 和 :where() 都是伪类函数,可以帮助缩短和停止创建选择器时的重复。它们都接受选择器的参数数组(id,类,标签等),并选择可以在该列表中选择的任何元素。...什么是CSS特异性(简而言之)? 在CSS中有四个层次的特异性层次。每一个级别或类别都有不同的分数,我们可以将所有的分数相加来计算选择器的特异性。...哪个选择器的数量最多,哪个元素的样式就会被应用到该元素上,这就是为什么有时当你写CSS时,你的样式不会被应用,会在开发工具中显示为划线。...特异性等级评分 ID——特异性得分为 100 内联样式——特异性得分为 1000 元素和伪类——特异性得分为 1 类、伪类和属性——特异性得分为 10 例如 button.btn { color:...正如你所看到的,有两种不同的专属性级别的伪类,这是因为不同的伪类可能具有不同的专属性,这取决于你使用的伪类以及如何使用它们。

    66220

    当函数成为一等公民时,设计模式的变化

    所谓“行为”,不正是函数所能要表达的吗? 函数的抽象能力 从函数的抽象角度看,任何行为都可以理解为是一个对类型进行转换的函数,这是FP思想对OO设计模式的最大冲击。...它接受的是一个语句块,而非函数类型。所以要注意这种形式与无参函数的区别。此外,by name call同时还具有延迟调用的能力。...例如,当我们定义一个invoke函数接受一个无传入参数的函数时: def invoke(f: () => Unit) = f() 如果你向invoke传入println("scala"),scala会报告错误...函数的组合能力 FP的编程思想中,除了高阶函数(包括Curry等)具有的抽象能力之外,还有一个好处是提供组合子能力。...其实我在OO语言中,很少运用GOF标志的职责链模式,也就是当寻找到具体职责的承担者时,履行职责后即可退出的方式;而是对这种模式进行调整,让其在履行职责后继续执行next的职责,又近乎于管道-过滤器了。

    1.2K50

    Aop动态生成代理类时支持带参数构造函数

    一、背景   在某些情况下,我们需要植入AOP代码的类并没有默认构造函数。那么此时动态生成的代理类也需要相同签名的构造函数,并且内部调用原始类的构造函数。...二、梳理功能点   在已支持通过默认构造函数进行AOP代码植入的情况下(以前发过一篇博文,传送门:大家一起Aop),实现该功能我们需要做的是:   1.如何通过获取原始类的构造函数参数列表,并使用Emit...生成代理类的相应构造函数。   ...2.如何创建并保存实例化代理类的委托,加快实例化速度。 三、实现方案   功能1:   在原来的生成代理类,代理类中的方法处增加生成构造函数的代码。...到这里我们的动态类的构造已经完成了,接下去解决功能2:   这里只要在原先直接取默认构造函数的地方增加一个判断,获取指定参数的构造函数来构造委托。

    1.2K20

    【榨干 Kotlin】把函数当类用,Compose 风骚的作用域机制

    但是,有一个事实是,Compose 是用函数来写界面的,它的每个组件都是一个函数,而不是类: 类和接口要做这种访问性的隔离,是很容易的。...Compose 和 DSL Compose 的写法是声明式的,但是跟同为声明式的 Flutter 有一个很大的不同是,它的界面组件是用函数来写的,而不是用类。...但是具体到作用域这个问题,就有一个障碍:就像我刚才说的,它的组件不是用类写的,而是函数。...函数并没有像类和接口那样的层级结构,成员属性和成员函数这些东西,函数是没有的——你可以写局部变量和局部函数,但这些东西是完全私有的,没法从外部调度,所以不是一回事。...通过这种方式,Compose 就实现了用函数——而不是类——也能进行作用域限制的目的。 @DslMarker 不过这还没完。

    36310

    当类的泛型相关时,如何在两个泛型类之间创建类似子类型的关系呢

    那么问题来了,当类的泛型相关时,如何在两个泛型类之间创建类似子类型的关系呢?例如如何让Box 和Box变得与Box有关呢?...因此当我们在传递参数时,ArrayList类型的是可以给List或者Collection传递的。 只要不改变类型参数,类型之间的子类型关系就会保留。...小结:可以通过继承泛型类或者实现接口来对其进行子类型化。 搞懂了子类型化的问题,我们回到“如何在两个泛型类之间创建类似子类型的关系“的问题。...泛型类或者接口并不会仅仅因为它们的类型之间有关系而变得相关,如果要达到相关,我们可以使用通配符来创建泛型类或接口之间的关系。...图为用上限和下限通配符声明的几个类之间的关系。

    2.9K20

    c++ 继承类强制转换时的虚函数表工作原理

    本文通过简单例子说明子类之间发生强制转换时虚函数如何调用,旨在对c++继承中的虚函数表的作用机制有更深入的理解。...因为在类child2的虚函数表中,共存在三个函数,分别为f() b() a(),其中函数b()是第二个,因此编译器就会把对象c1对应的内存来当做类child2的内存布局来解析(注意内存里的内容不变,还是...c1的,即为类child1的内存布局,在这里只有虚函数表),此时在类child1的虚函数表中也找第二个函数,找到了函数a(),因此输出“child1::a()”,运行正常。...但这种行为可能是危险的,若使用的内存布局并不适合真实内存,很可能造成访问越界等问题(如上例中的“pc21->a();”,这次就在类B的虚函数表中找第三个函数,结果没有找到(访问越界),函数运行时崩溃。)...2、通过上述例子可知,虚函数在虚函数表中的存储顺序是与声明顺序一致的,而不是虚函数名字的字符串排序,如本例中为f() b() a(),虽然编程时的自动补全提示框中显示的顺序是a() b() f(),但可能已经经过内部优化

    1.2K30

    2025新鲜出炉--前端面试题(三)

    依赖收集:当读取数据时,Dep 订阅中心会记录所有依赖于该数据的 Watcher。 触发更新:当数据发生变化时,通知 Dep 订阅中心,然后 Dep 通知所有 Watcher 进行更新。...当数据被读取时,会触发 getter 函数,此时 Dep 实例会记录当前的 Watcher。...当创建一个函数时,该函数的 prototype 属性会自动获得一个 constructor 属性,指向函数自身。 通过原型,可以实现属性和方法的继承。...super 关键字用于调用父类的构造函数,它有以下作用: 当在子类的构造函数中使用 super 时,它实际上是在调用父类的构造函数。...CSS 变量可以在运行时更新,是因为它们是浏览器原生支持的,并且是动态的。当通过 JavaScript 修改了 CSS 变量的值时,所有使用该变量的 CSS 属性都会自动更新。

    12910

    【C++】构造函数初始化列表 ① ( 类对象作为成员变量时的构造函数问题 | 构造函数初始化列表语法规则 )

    一、类对象作为成员变量时的构造函数问题 1、问题描述 如果 一个类 A 的对象 作为 另外一个类 B 的成员变量时 , 在以下场景会报错 : 为类 A 定义 有参的 构造函数 , 那么 A 的无参默认构造函数就失效了...; 此时使用 默认无参构造函数 初始化 B , 就会报错 ; 在一个类中 , 其成员变量是 带有参构造函数 的类型 , 这种情况下没有调用 有参构造函数的机会 , 此时就会出现 编译报错情况 ; 在下面的代码中..., A 只有通过 有参构造函数 A(int age, int height) 进行初始化 , 无法再使用 无参构造函数 ; class A { public: // 带参构造函数 A(int age...是一种用于初始化类的成员变量的方法 ; 构造函数初始化列表 可实现功能 : 为成员变量提供初始值 调用其他 成员变量的 构造函数 来初始化成员变量 构造函数初始化列表语法规则 : 构造函数() : 成员变量名称...初始化列表中的元素由 成员变量的名称 和 初始值组成 , 使用等号 = 连接 ; 在下面的代码中 , 为 B 类定义了默认的构造函数 , 其中定义了 构造函数 初始化列表 ; 在 初始化列表中 , m_age

    68230

    vue基础-动态样式&表单绑定&vue响应式原理

    数组格式 注意:每个表达式都要求返回一个已经定义过的class类 :class='{"css类名1":布尔值,"css类名2":布尔值,...}'...vue可以监听一个变量的变化,当变量发生变化时,vue可以做一些工作。当面试官问响应式的原理,是问什么呢?问的是“vue如何监听data选项上的变量的变化的?” 双向绑定?...专指vue表单的v-model 模拟响应式实现过程 简介:1.首先创建vue实例,通过object.defineproperty设置拦截器 2.当使用v-text等指令操作时,会进行touch,定义一个...dep收集依赖,存放与异步队列中 3.v-model,还可以设置值,相当于调用set方法 4.进行初始化,第一次渲染需要通知watcher观察者函数 5.定义观察者函数,当调用set修改声明式变量的值...,发生变化时,会通知监听器,重新渲染,(即遍历收集依赖队列的所有fn,并执行)

    1.7K20
    领券