前端面试题--原生脚本代码,实现点击事件,动态添加或者删除一个class类名

最新推荐文章于 2023-01-12 14:32:04 发布

MRSLLLL_

最新推荐文章于 2023-01-12 14:32:04 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端面试文章标签：前端 JavaScript

本文链接：https://blog.youkuaiyun.com/MRSLLLL_/article/details/99889568

这篇博客探讨了如何使用原生JavaScript代码来处理元素的类名。通过element.classList.remove()方法可以移除类名，而element.classList.add()则用于添加类名，这些都是前端开发中常见的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

  
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.expanded

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

MRSLLLL_

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

使用jQuery动态添加HTML元素

TechChamp的博客

09-23

564

jQuery是一个流行的JavaScript库，它简化了JavaScript代码的编写，并提供了许多强大的功能和方法。其中一个重要的功能是使用jQuery动态添加HTML元素到网页中。除了添加段落元素，我们还可以使用类似的方法来添加其他类型的HTML元素，例如标题、链接、图像等。下面是一个示例，演示如何使用jQuery添加一个带有标题文本的。一旦引入了jQuery库，就可以开始使用它来动态添加HTML元素了。函数创建了一个新的段落元素，并将其赋值给变量。在上面的示例中，我们创建了一个新的。

原生js 增加html,原生js添加一个或多个类名的方法分析

weixin_39847945的博客

05-30

347

本文实例讲述了原生js添加一个或多个类名的方法。分享给大家供大家参考，具体如下：好吧今天写个js，不知道怎么添加类名了#box {width: 200px;height: 200px;margin: 0 auto;background: pink;border-radius: 20px;}@keyframes move{0%{width: 500px; background-color: red;...

参与评论您还未登录，请先登录后发表或查看评论

点击时添加不同的类

dieshenqi9825的博客

09-30

126

See the Pen amyRdG by gc (@sxgc) on CodePen. 转载于:https://www.cnblogs.com/imguoc/p/5924187.html

[源代码]List的增加与删除

aiji7208的博客

02-01

// Removes the element at the given index. The size of the list is // decreased by one. // public void RemoveAt(int index) { if ((uint)index >= (uint...

vue里面点击删除获取具体id，进行删除这个功能

qq_54030660的博客

01-12

3341

vue里面点击删除获取具体id，进行删除这个功能

动态添加class名，改变标签样式（包含鼠标移入、移出及点击事件）

从零出发

03-22

1万+

1、常用的适用场景：多个超链接标签之间，通过点击实现页面跳转。2、具体代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">

基础面试题集结（持续更新）

qq_18144239的博客

10-13

586

title: 基础面试题 date: 2019-10-12 20:23:00 updated: 2019-10-12 20:23:00 tags: ['web前端面试'] 基础面试题 1. bootstrap删格化系统标识，区间分割超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面显示器 (≥992px) 大屏幕大桌面显示器 (...

jquery 点击事件点击元素添加class，兄弟节点移除class

勋勋勋勋小勋勋的博客

09-10

7417

欢迎大家一起交流学习n(*≧▽≦*)n $("#circle").on('click', 'li',function(){ $(this).addClass("active").siblings().removeClass("active"); }); //索引位置$(this).index() eq() 方法将匹配元素集缩减值指定 index 上的...

关于js根据类名获取元素

小星的博客

10-25

2万+

最近在仿照阴阳师官网首页来做练习（使用原生js），碰到了一些问题，如js中根据类名来获取元素。因为document.getElementsByClassName有兼容性的问题，所以根据类名来获取元素一般都是自己写一个方法，以前一直用的方法是这样的： /** * * 作用：根据指定的类名查找元素 * * 参数： * @param oParent：需要查找的元素的父级（对象），可以是do

原生js添加类名

热门推荐

前端指南

01-18

5万+

动态添加class类名在前端开发过程中是很常见得做法，比如说在实现轮播图的时候给当前图片的锚点添加一个active类,有又或者在实现动画的时候添加一个终态css类。当然，有很多js库中封装了添加类名的方法，典型的比如jquery中的addClass()方法。但是，在实际开发中，如果页面比较简单，逻辑功能不是特别复杂的时候。还是推荐用原生的js来实现这些功能，这样能够有效的提升...

遍历html中所有DOM节点，并计算DOM节点数

maid_04的博客

04-19

3593

这是一个我在面试中遇到的问题，之前从来没有想过这个问题，所以一被问就卡住了，当然结果也就是凉凉了….所以下来查了一下这个问题，并做以记录警戒自己 // 定义一个空数组，存放或者取出制表位'\t' var blanks = []; // 遍历的函数主体 function getChildren(parent){ // 按着HTML里的缩进把遍历的元素打印出来 // parent.node

WEB面试题（2）

qq_40041509的博客

10-25

4490

JS交互问题汇总 1.JS中能够实现跟服务器后台交互的手段有哪些? Asynchronous Javascript And XML js的异步请求对象 script标签的src属性 location.href, assign replace, window.open() , background-image:url("") , form表单 , 超链接跳转到服务器程序 , img 的src属性 , video和audio 的src属性 , link的href , iframe(了解) form表单交互

JavaScript之DOM节点类型、遍历节点、节点的属性以及节点方法

M_DREAMER的博客

06-11

1万+

先介绍一下节点类型都有哪些：一、节点类型节点类型属性nodeType返回值元素节点1属性节点2文本节点3注释节点（comment）8document9DocumentFragment11所以一般我们获取节点类型用 nodeType二、遍历节点树这种遍历可以遍历文本类节点、注释节点、元素节点等。任何浏览器都好使。<div > <strong>...

html5 添加class,点击添加class 接着编写添加class的方法

weixin_31200621的博客

06-19

1274

jquery点击加class在点击移除添加的class点击.productVs 添加.ppp在点击移除.ppptoggleClass方法可以实现对某一class进行添加、删除操作。示例： $('#test').toggleClass('className');上面的代码将会依次为id为test的元素添加/删除名为className的class，如果test元素存在className，则删除cla...

class-change微库：CSS类名处理与数据属性事件触发

例如，用户可以使用data-class-change属性来定义一个事件名称，并且在该事件被触发时添加或移除一个或多个类名。这个微库的主要优势在于它简化了类名的动态更改过程，使得前端开发更加高效和易于维护。它也可以...