- 2024-10-09【javascript 编程】Web前端之JavaScript动态添加类名的两种方法、区别、className、classList
通过className来添加或删除类名添加类名获取元素el.className="类名1类名2...";多个类名用空格隔开。移除类名获取元素名el.className="";直接等于一个空字符串即可删除类名。通过classList来添加或删除类名添加一个类名获取元素名el.classList.add("类名");。
- 2024-09-20图标切换效果
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>IconToggle</title>
- 2024-05-31新闻列表页：通过WEUI框架实战我深入理解了块级作用域与点击事件
前言今天简单的使用WEUI进行了新闻列表页的开发。在实现JS中发现了许多有趣的事情。今天就打算写一个文章给遇到了同样问题的同学进行解惑。话不多说，开始发车。以下是我要实现的效果内容，大家可以看看内容比较。代码我贴在文章末尾：框架分为以下两点：Nav导航栏搜索栏Nav导
- 2024-05-185.18
学习记录app即将完结 今天增加了教师的功能和自动登录的功能```java//查询所有班级根据班级的学生的分类信息每个学生的学习记录次数@OverridepublicMap<String,Object>listClass(){Map<String,Object>map=newHashMap<>();List<String>classList=u
- 2024-04-11document 常用属性方法总结
attrbutenodeName定义：nodeName属性返回节点的名称使用console.log(div1.nodeName)nodeValue定义：nodeValue属性返回一个字符串，表示当前节点本身的文本值，该属性可读写只有文本节点（text）、注释节点（comment）和属性节点（attr）有文本值.使用console.log(div1.childNodes[1].nod
- 2024-03-11Vue — v-load封装 loading效果
<template><divclass="app"><divclass="box"v-load="isLoading"><ul><liv-for="(item,index)inlist":key="index">{{item.name}}&l
- 2024-01-24js CSS 类扩展
自HTML4被广泛采用以来，Web开发中一个主要的变化是class属性用得越来越多，其用处是为元素添加样式以及语义信息。自然地，JavaScript与CSS类的交互就增多了，包括动态修改类名，以及根据给定的一个或一组类名查询元素，等等。为了适应开发者和他们对class属性的认可，HTML5增加了
- 2023-11-23classList removeAll谬想
习惯了了用classList修改class某天想删除所有class，在加上个特定class居然想到是否有classList.removeAll这个API发现没有还想着用classList.forEach循环删除脑子浆糊了className就是用来完全重置class的classList是为了保留原有class才搞出来的所以，要删除所有class，用cla
- 2023-11-18Vue的自定义指令
在使用自定义指令的标签写入v-'自定义指令名'<template><divclass="box"v-loading="loading"></div></template>exportdefault{data(){return{loading:true}},} 公共配置，写在如main.js的公共js中Vue.di
- 2023-10-1810.18日记
//给每个主节点添加点击事件监听器mainNodes.forEach(mainNode=>{ mainNode.addEventListener('click',(e)=>{ //阻止默认链接行为 e.preventDefault(); //切换子菜单的显示状态 constsubMenu=mainNode.next
- 2023-07-31APIs修改样式
1.可以通过style来改，但是太鸡肋样式一多就比较麻烦2.className和classList修改多样式是推荐使用后者优先使用因为其不影响其它类名classList.addclassList.removeclassList.toggle(有此类名就减去没有就加上)
- 2023-07-21通过JS设置CSS样式
读取元素样式在JS中可以使用getComputedStyle()读取元素样式官网摘要Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS
- 2023-06-21表单焦距失去弹出未填气泡提示框
html部分 <divclass="bubbleshow"> <divclass="arrow-down"></div> <pstyle="display:flex;align-items:center;"><svgt="1687242464305"class="icon"
- 2023-06-09threejs-css2dObject操作之物体遮挡标签后应该隐藏，而不是出现透视效果
先看coding之前的效果： 这些在背面的标签的，转到一定角度，被模型遮挡后，理论上就不应该被看到。这才是比较符合实际的coding之后（另一侧对称点就被隐藏）： 具体代码(j借助于光线投影)：//绑定鼠标事件，当用户移动视角后触发()functionbindRayShotEvent(){document.addEvent
- 2023-05-145种你未必知道的JavaScript和CSS交互的方法
随着浏览器不断的升级改进，CSS和JavaScript之间的界限越来越模糊。本来它们是负责着完全不同的功能，但最终，它们都属于网页前端技术，它们需要相互密切的合作。我们的网页中都有.js文件和.css文件，但这并不意味着CSS和js是独立不能交互的。下面要讲的这五种JavaScript和CSS共同合作的方
- 2023-04-05js dom className classList
classListdom.classList.contains('black')//删除blackdom.classList.remove('black')//新增.reddom.classList.add('red')classNameletcName=elementNodeReference.className;elementNodeReference.className=cName;详情见官网
- 2023-03-31点击某个元素查看有没有指定的父元素
mounted(){document.addEventListener("click",(e)=>this.fintParent(e));},methods:{fintParent(e){constclickNode=e.srcElement;letparent=clickNode.parentNode;while(parent){if(
- 2023-03-28第四篇 html5 - 新特性【 Dom操作类 + 自定义标签属性 】
html5新增Dom操作类1、classList当前元素的所有样式列表2、add()添加类3、remove()删除类4、toggle()有就移出，没有就添加5、contains()是否包含某个类，包
- 2023-03-23JavaScript学习笔记
JavaScript学习笔记 操作属性 获取标签querySelector（‘CSS选择器’）返回一个元素对象，可以直接操作；找不到返回null；querySelectorAll（
- 2023-03-04JavaScript Modal Image
<!DOCTYPEhtml><html><head><title>JavaScriptModalImage</title></head><styletype="text/css"> .modal{ position:fixed; z-index:1
- 2023-02-28classList属性的知识点整理
classLIst属性返回元素的类名，作为DOMTokenList对象该属性用于在元素中添加、移出、切换css类语法：elem.classList方法：add(String[,String])：添加指定的类值。如果这些类已经
- 2023-02-22el-select 远程输入情况下 下拉箭头icon失效
1.watch监听当前对话框的显示与否（这里的选择框的显示与否根据此字段，若一直存在则可在mounted）isCondition:{//添加icon箭头handler(val){
- 2023-02-13 CSS畅想 | 有一天，我遇到了一个奇特的路灯，眼里一下子有了光
灵感来源我对系列这个词的执着来源于大学时代看小说的习惯，看书爱看系列文。于是我也喜欢把自己写的文章分分类，比如「工作小记」、「经验总结」等。当然了它们学会自己成长之
- 2023-02-05JavaScript学习笔记—DOM：操作class
element.classList是一个对象，对象中提供了对当前元素的类的各种操作方法element.classList.add()向元素中添加一个或多个classelement.classList.remove()移除元素中