js日记之操作元素属性

最新推荐文章于 2024-05-06 09:29:34 发布
最新推荐文章于 2024-05-06 09:29:34 发布
阅读量50 收藏
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53438035/article/details/116355900
版权

获取元素属性

方法一：
element.属性
方法二：
element.getAttribute(‘属性’)
区别：getAttribute可以获得自定义属性的值
代码：

<body>
    <div class="a" aaa="1"></div>
    <script>
        var div=document.querySelector('div')
        console.log(div.className);
        console.log(div.getAttribute("aaa"));
    </script>
</body>

效果：
在这里插入图片描述

增加元素属性

方法一:
element.属性=“值”;
方法二:
element.setAttribute(“属性名”,“值”)；
添加之前的代码：

<body>
    <div class="a" aaa="1"></div>
    <script>
      /*   var div=document.querySelector('div')
        div.id="abd"
        div.setAttribute("bbb",2); */
    </script>
</body>

效果：
在这里插入图片描述
添加之后的代码：

<body>
    <div class="a" aaa="1"></div>
    <script>
        var div=document.querySelector('div')
        div.id="abd"
        div.setAttribute("bbb",2);
    </script>
</body>

注意：2并未加引号
效果：
在这里插入图片描述

移除属性

element.removeAttribute(“属性”)；
移除之前代码：

<body>
    <div class="a" aaa="1"></div>
    <script>
        /* var div=document.querySelector('div')
        div.removeAttribute("aaa") */
    </script>
</body>

效果：
在这里插入图片描述
移除之后代码：

<body>
    <div class="a" aaa="1"></div>
    <script>
        var div=document.querySelector('div')
        div.removeAttribute("aaa")
    </script>
</body>

效果：
在这里插入图片描述

小白白中之白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端通关日记之优雅添加数组元素
泰斯特test的博客
08-02 237
起源 需求是需要在前端输入一个数组，该数组作为参数请求后端接口。项目前端UI框架采用element-ui， 笔者实现的方式是 “巧用” 了 <el-select> 标签，并添加了多选等一系列属性，代码如下： <el-select v-model.trim="scope.row.query" multiple // 多选 filterable de...
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
10-30
在不支持`getBoundingClientRect`的环境中，例如旧版本的IE浏览器，`getXY`函数会采用另一种策略，即通过遍历元素及其所有父元素的offset属性来累加计算坐标。这段代码中，包含了对Safari浏览器的特殊处理，因为...
js日记之修改元素属性
m0_53438035的博客
04-29 52
代码： <script> var btn=document.querySelector('button'); var img=document.querySelector('img') btn.onclick=function(){ img.src='../images/2.jpg' } </script>
JS操作DOM元素属性和方法
John的专栏
12-02 443
Dom元素基本操作方法API，先记录下，方便以后使用。    　　W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API，为文档提供了结构化表示，并定义了如何通过脚本来访   问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM，JavaScript根本没有Web页面和构成页面元素的概念。文档
js日记之节点操作
m0_53438035的博客
05-03 204
睡不着，半夜起来学习–2021年某日凌晨4：02 一：父节点 1：返回父节点 element.parentNode，得到的是离元素最近的父节点。如果找不到则返回为null 代码： <body> <div class="g"> <div class="f"> <div class="s"></div> </div> </div> <scrip
09、JavaScript-DOM获取元素及修改属性
执手天涯@的博客
01-13 1077
1、Web Api基本认识 【作用】： 使用JavaScript去操作html和浏览器 【分类】： DOM ：文档对象模型 BOM ：浏览器对象模型 JavaScript结构图： 【什么是DOM】： DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API 【DOM树】： 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树 DOM对象： 浏览器根据html标签生成的 JS对象。 所有的标签属性都可以在这个
js个人日记
wisa0321的博客
01-07 216
1概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 JavaScript本来应该叫Livescript，但是在发布前夕，想搭上当时超热的java顺风车，临时把名字改为了JavaScript。（也就是说js跟java没有关系，当时只是想借助java的名气）。 javaScript 被用来改进设计、验证表单、检测浏览器、创建cookie
填坑日记之JS恶补
weixin_51551506的博客
04-23 1174
一、JS输出 JavaScript 显示方案 JavaScript 能够以不同方式“显示”数据： 使用 window.alert() 写入警告框 window.alert(5 + 6); 使用 document.write() 写入 HTML 输出 document.write(5 + 6); 使用 innerHTML 写入 HTML 元素 document.getElementById("demo").innerHTML = 5 + 6; 使用 console
JS 学习日记1
Agirl07的博客
07-20 464
学习目标： 1.能够说出JavaScript 是什么 2.能够说出浏览器执行JavaScript的原理 3.能够说出JavaScript由哪三部分组成 4.能够写出JavaScript三个输入输出语句 5.能够说出变量的主要作用 6.能够写出变量的初始化、变量的命名规范和交换变量案例 7.能够画出变量是如何在内存中存储的 学习内容： 一 初识JavaScript 1.什么是JavaScript JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script是脚
前端学习日记-----JS内部访问对象内部属性方法
最新发布
Mi_Ni_BoX的博客
05-06 300
js内部访问对象中的属性，可用方括号法来实现动态访问对象属性
HTML-CSS-Javascript-:日记
05-31
DOM（Document Object Model）操作是JavaScript在网页上工作的重要部分，它允许我们查找、修改和添加HTML元素。此外，熟悉事件监听和回调函数对于实现用户交互至关重要。 学习这三个技术，不仅可以帮助你创建静态...
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
10-30
需要注意的是，由于浏览器之间的兼容性问题，`YAHOO.util.Dom.getXY`需要处理各种情况，比如元素的`offsetParent`属性、`display`样式等。因此，这个函数可能比看上去要复杂得多。 总的来说，YAHOO.util.Dom模块...
欧美个人日记模板
01-13
欧美个人日记模板通常会包括日记条目展示区、时间线、导航菜单、个人信息展示区、评论区等元素，并可能融入响应式设计，确保在不同设备上都能良好显示。 在提供的压缩包文件中，有以下几个关键文件： 1. **index....
Javasript-Journey:javascript学习日记
05-29
5. **DOM操作**：通过JavaScript，我们可以动态创建、修改和删除HTML元素，这涉及到选择元素（getElementById、querySelectorAll等）、属性操作、事件绑定等。 6. **AJAX与Fetch API**：AJAX（异步JavaScript和XML...
js取绝对值的两种方法
热门推荐
m0_53438035的博客
08-18 1万+
1：Math.abs(); 2：a>0?a:-a
块级作用域和函数作用域
m0_53438035的博客
08-03 2147
函数作用域与块级作用域 函数作用域：在函数内部声明的变量只能影响到变量所在函数体本身，无法从外部对函数内部的变量进行调用，被称为‘函数作用域’ 块级作用域：ES6 引入了 let 和 const 关键字，JavaScript 也有了块级作用域。当代码块中存在 let 或 const，这个代码块就成为了块级作用域。ES6 的块级作用域必须有大括号，如果没有大括号，JavaScript 引擎就认为不存在块级作用域。(即定义变量和使用变量只能在同一个{}里) var,let,const的区别 var var没有块
property和attribute，以及获取设置属性
m0_53438035的博客
07-28 530
在这里插个眼，说实话，没太明白 区别和相同 一般的内联属性为property和attribute共有，但自定义属性（内联样式中）为attribute所有。 attribute中的class在property中叫做className（在取值和赋值时注意） 取值和赋值（设值）的区别： 3.1.attribute的取值和赋值:getAttribute(‘属性名’,‘属性值’)，setAttribute(‘属性名’,‘属性值’) 3.2.property的取值和赋值分别为:变量=对象.属性;对象.属性=属性值（不
js之无法选中文字和禁止右键菜单小案例
m0_53438035的博客
05-04 515
代码： <body> <p>这是一段无法右键复制的文字</p> <p>这是一段无法选中的文字</p> <script> /* 禁止鼠标右键菜单 */ var p=document.querySelectorAll('p') p[0].addEventListener('contextmenu',(e)=>{ e.preventDefau
js中获取元素属性值
09-03
在JavaScript中，可以使用以下方法来获取元素的属性值： 1. 使用`getAttribute()`方法：该方法可以获取指定属性的值。...以上是获取元素属性值的一些常用方法。根据具体的需求和属性名称，选择适合的方法即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值