【JS给元素添加属性：setAttribute；classList.remove；classList.add；】

最新推荐文章于 2024-03-19 18:28:30 发布

Min_Fox

最新推荐文章于 2024-03-19 18:28:30 发布

阅读量2k

点赞数 1

分类专栏： js 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/min_fox/article/details/125405393

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了如何通过JavaScript操作HTML中的<img>元素，包括使用getElementById获取元素，setAttribute修改src属性，以及classList方法实现添加和删除CSS类以控制样式显示。展示了如何结合HTML、CSS和JavaScript进行前端交互设计。

摘要由CSDN通过智能技术生成

首先获取当前元素

html

<img id="zi" class="zi" src="/src/image/w.png">

const zi = document.getElementById("zi");

修改img元素的src属性
使用setAttribute来设置属性。

zi.setAttribute("src", this.key);

给元素添加class
使用classList.remove来删除 class、classList.add来新增class，可以用来修改样式。

// 删除class
 zi.classList.remove("update-file-block");
 // 增加class
 zi.classList.add("update-file-none");

css

.update-file-block {
  display: inline-block;
}
.update-file-none {
  display: none !important;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Min_Fox

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

js 修改Class未生效

qq_36079511的博客

07-26

2992

问题描述：最近开发遇到了使用js的classList添加类时未在页面中生效的问题，奇怪的是使用JS查看dom数据类名是已经添加上的，但是页面上的dom对象并没有反应。部分代码如下： const options = { ...playPDFDefaultConfing, ...o } const domEnd = options.elem.querySelectorAll(".play-item-mask")[0]; const domIframe = options.elem.

transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段

专研前端，探索后端

04-26

425

transitionend过渡监听事件：过渡监听事件transitionend指的是CSS3中过渡效果执行一次后触发事件处理函数，如下案例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div {

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

js动态给元素添加属性

文龙刚的博客

12-15

2038

js动态给元素添加属性

js给元素设置属性,js设置自定义属性

wenangou的博客

10-23

350

英文名object，翻译成中文就是对象。用英语的角度来说object就是物体实体，即使他看不见摸不着Python中的所有运算符号。中文的对象指的是女朋友。在计算机中，用英语的角度理解对象，就是说：放在内存里面的复杂数据集合，也叫做数据与方法的封装，是一种编程逻辑概念。函数是对数据与代码的封装，假如再把函数及函数外的数据进行封装，那就是object，即对象。

js 取元素创建元素添加元素添加属性

weixin_46140106的博客

06-05

622

js 给元素添加自定义属性

热门推荐

lseap的博客

05-21

3万+

给元素添加自定义属性 obj.setAttribute('attr_name','attr_value'); //例如obj.setAttribute('class','snow-container') 给元素添加class属性的三种方法 document.getElementsByTagName('body')[0].className = 'snow-container'; //设置为新的...

js给动态添加的元素添加属性

weixin_43676252的博客

02-18

7787

将一段标签动态添加到div中，给这段标签的img标签设置width:100% 一开始设置了添加类名 // 内容 const content = res.data.data.info.content; document.getElementById('content').innerHTML = content; var a = document.getElementById("content...

示例4：操作节点属性.rar_javascript操作节点属性

09-20

6. **类名操作**：`classList`属性提供了一组方法来操作元素的类名，如`add()`, `remove()`, `toggle()`, `contains()`等。例如，`document.getElementById('myElement').classList.add('active');` 7. **数据属性...

前端基础学习笔记JS-运算符自定义, 自定义标签属性 classList

勤能补拙

01-18

623

运算符算术运算符运算符前后空格隔开区别算术运算符 + 和字符串拼接符 + 加号两边只要有一边是字符串,则为字符串拼接符减号两边如果有字符串,会将字符串隐式转化为数值,如果字符串内非数字,则返回NaN * 同上 ** //指数运算 2**3 2的3次方前一个叫底数,第二个叫指数,可以为负数 % // 模取余大模小取余小模大取小 //小案例随机颜色 let ...

// draggable.js import { onMounted, onBeforeUnmount } from 'vue' export default { mounted(el) { console.log('el',el) el.setAttribute('draggable', true) let startX, startY, initialLeft, initialTop, currentX, currentY const onDragStart = (e) => { console.log('e',e.preventDefault()) e.stopPropagation() // e.preventDefault() startX = e.clientX || e.touches[0].clientX startY = e.clientY || e.touches[0].clientY initialLeft = el.offsetLeft initialTop = el.offsetTop el.classList.add('dragging') } const onDrag = (e) => { e.stopPropagation() currentX = (e.clientX || e.touches[0].clientX) - startX currentY = (e.clientY || e.touches[0].clientY) - startY el.style.left = `${initialLeft + currentX}px` el.style.top = `${initialTop + currentY}px` } const onDragEnd = (e) => { e.stopPropagation() el.classList.remove('dragging') } el.addEventListener('dragstart', onDragStart) el.addEventListener('drag', onDrag) el.addEventListener('dragend', onDragEnd) el.addEventListener('touchstart', onDragStart) el.addEventListener('touchmove', onDrag) el.addEventListener('touchend', onDragEnd) onMounted(() => { el.classList.add('draggable') }) onBeforeUnmount(() => { el.removeEventListener('dragstart', onDragStart) el.removeEventListener('drag', onDrag) el.removeEventListener('dragend', onDragEnd) el.removeEventListener('touchstart', onDragStart) el.removeEventListener('touchmove', onDrag) el.removeEventListener('touchend', onDragEnd) el.classList.remove('draggable') el.classList.remove('dragging') }) } } 为什么拖拽时会出现虚影,残影, 怎么解决这个问题

05-27

el.classList.add('dragging'); }; ``` 此外，您还可以在CSS中使用`-webkit-user-drag: none;`来阻止元素的默认拖拽效果，例如： ``` .draggable { -webkit-user-drag: none; user-select: none; } ``` 请注意...

通过JS给HTML元素增加、删除和获取属性内容

living_ren的博客

02-22

3万+

1.通过ID或者其他元素找到要处理的HTML对象：（举例通过ID） var obj=document.getElementById('id'); 2.操作此对象添加属性：obj.setAttribute('attr_name','attr_value'); 获取属性值：obj.getAttribute('attr_name'); 删除属性：obj.remo...

js给元素添加自定义属性,js添加元素节点的方法

chatgpt002的博客

12-03

379

/ 在原有样式操作 document.styleSheets[0].addRule(".box", "height: 100px");如果属性有"-"号，就写成驼峰的形式（如textAlign）如果想保留 - 号，就中括号的形式 element.style["text-align"] = "100px";因JS获取不到css的伪元素，所以可以通过改变伪元素父级的class来动态更改伪元素的样式。

js给元素加html属性,js 如何给标签增加属性

weixin_36123285的博客

06-04

1177

var div1=document.getElementById("div1"); //id选择器div1.innerHTML="我能干什么";//div1.innerText="我能干什么"; 不认// div1.innerText+="新增的内容";var div2=document.getElementsByClass...

JS脚本 - 批量给所有指定标签追加Class属性

Zong_0915的博客

07-13

1908

公司里我们有个应用引入了UBT埋点，记录了页面上所有的点击操作以及对应的点击按钮。但是我们看下来发现，我们需要给每个按钮加一个唯一标识做区分，并且这个ID是给UBT埋点专用的。那怎么办呢？加Id：不合理，因为如果某个标签已经自带Id了，我们不太可能去覆盖它。加Class：合理，class属性可以加多个，也可以过滤。

vue.js中如何给元素动态添加属性?

lxuanz的博客

08-07

1330

封装组件的时候属性为动时怎么绑定属性property : 'positionId' , title : '版位' , type : 'select' , required : false , multiple : false , options : [ ] , placeholder : '请选择' , } , {

JavaScript 动态添加、移除元素或属性

司马懿的西山居

12-11

1万+

JavaScript 动态添加、移除元素 appendChild(newnode) 向节点的子节点列表的末尾添加新的子节点。 insertBefore(newnode, existingnode) 在已有子节点之前插入新的子节点。 removeChild(node) 删除元素的某个指定的子节点，并以 Node 对象返回被删除的节点，如果节点不存在则返回 null。 innerHTML 属性设

JavaScript进阶——操作元素属性