setAttibute()和getAttitude()不常用？一个小案例让你看到他们的妙处。

原创

已于 2022-10-15 20:20:56 修改 · 506 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #javascript

于 2022-08-23 23:53:30 首次发布

本文通过实例讲解了如何使用JavaScript的setAttribute()和getAttribute()方法来操作HTML元素的属性，包括添加、修改和删除属性，以及如何在导航栏选项卡切换时动态控制内容显示。

案列介绍

 这是一个导航栏切换选项卡的小案例，通过这个案例就能体现setAttibute()和getAttitude()美妙之处。

了解一下基本语法

getAttribute() 获取标签属性的值

 <a href="http://www.baidu.comm" id="zhi"></a>

 var zhi=document.getElementById('zhi');
 zhi.getAttribute('href');//获取到a标签href的值

setAttribute() 设置标签属性和属性值

 <h2 class="h2">标题1</h2>

 var h2=document.querySelector('h2');//获取元素
 h2.setAttribute('class','h3');//修改值
 h2.setAttribute('index','1');//新增加一个属性和值

setAttribute(‘属性名’，‘属性值’)，如果存在改属性(js原生属性)，覆盖他的属性值，如果不存在就新增一个属性。

removeAttribute() 删除属性

 var h2=document.querySelector('h2');//获取元素
 h2.setAttribute('class','h3');//修改值
 h2.setAttribute('index','1');//新增加一个属性和值
 h2.removeAttribute('index');//删除index属性

removeAttribute(‘属性名’)删除之后变为null，不赋值就变为undefined

代码

<!DOCTYPE html>
<html lang

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿珍敲code

关注关注

3
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

职场基本功：称赞他人能让你获得一个友好的交流环境

专注于计算机研发知识和资讯分享

09-27

214

称赞有开拓新关系和维护老关系两种功能，即“试探”和“确认”两种功能。用好称赞，能很快收获领导的善意、维护和盟友的关系，还能结交越来越多的人。案例：领导汇报工作的时候提到并表扬了你。大领导问了你的姓名、学历和职业经历，并称赞了你的贡献，这个时候你应该怎么做？放下肤浅的名利心，真正去认识领导和同事的闪光点，你的称赞才会更美、更真。称赞大人物的书法、长跑习惯、爱去艺术展、热心参加公益慈善、孝顺等特质。称赞小人物敬业、努力、有见识，会让他觉得更有帮助。

图论在计算机科学中的应用：Google是如何找到和下载所有网页的？（如何构建一个网络爬虫？）

专注于计算机研发知识和资讯分享

04-21

1449

文章目录引言I、背景知识和基本原理:图论1.1 大数学家欧拉的故事1.2 邮差问题1.3 图的遍历算法1.4 有向图1.5 城市间的旅游和下载网页有什么关系？II 、如何下载整个互联网上的全部网页？（如何构建一个网络爬虫？）2.1 记录已经下载过的网页的小本本采用随机化的原理进行管理2.2 图论中给出了广度优先遍历（BFS）和深度优先遍历（DFS）两种算法，到底该用哪个？2.3 如何分析一个HTML页面，然后把里面的超链接地址URL提取出来？III、小结see also 引言找到所有的网页要用到一个被称为

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

YouTube-8M: A Large-Scale Video Classification Benchmark

热门推荐

人工智能

06-26

121万+

Abstract Many recent advancements in Computer Vision are attributed to large datasets. Open-source software packages for Machine Learning and inexpensive commodity hardware have reduced the barrier

a标签点击中文文件名乱码,通过a标签href属性跳转后台乱码问题

weixin_29391747的博客

03-18

435

通过a标签href属性跳转后台乱码问题,试过request.setCharacterEncoding("UTF-8");设置,没有用。页面代码查看更多>>后台代码@RequestMapping("/findTypeTitle")public String findTypeTitle(Model model,String title_type) throws UnsupportedEnc...

JavaScript中setAttribute用法总结

anderberte

07-12

1078

我们经常需要在JavaScript中给Element动态添加各种属性，这可以通过使用setAttribute()来实现，这就涉及到了浏览器的兼容性问题。 setAttribute(string name, string value)：增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。 1、样式问题 setAttribute("class", value)中class是指改变"

JSP内置对象Session——setAttribute/getAttibute/removeAttribute

m0_61160520的博客

03-24

2400

Session——setAttribute/getAttibute/removeAttribute

setAttribute 方法

qq_44943584的博客

04-20

1万+

setAttribute 方法

安利几个内网穿透神器，轻轻松松将个人电脑或者服务器上云，你用过几个？

网络技术联盟站

04-02

738

它通过一个“中间人”——通常是一台公网服务器，把外部的请求接进来，再转发到你内网的设备上。如果你是程序员，本地写了个Web应用或API，想让客户或团队试用，但又不想立刻部署到云服务器上，怎么办？办公室电脑里有个文件忘了发，家里电脑上有个任务得处理，内网穿透能让你通过远程桌面，从任何地方控制内网设备，简直是救急神器。cpolar是个新兴的内网穿透工具，支持HTTP、HTTPS、TCP，提供免费和付费版本，性价比超高。启动后，花生壳会给你一个域名，输入浏览器就能访问内网服务，比如远程桌面直接用域名连接。

精选资源

Python+tkinter使用80行代码实现一个计算器实例

01-20

建议大家跟着敲一遍代码，体会一下代码复用、字符串方法的运用和动态创建组件的妙处，然后在这个框架的基础上进行补充和发挥。选择任何一款Python开发环境，创建一个程序文件，命名为tkinter_Calculator.pyw，然后...

javascript中setAttribute()函数使用方法及兼容性

xiaohubeiplus的博客

11-29

4637

setAttribute()函数可以设置对象的属性，如果不存在此属性，则会创建此属性。语法结构: el.setAttribute(name,value) 参数列表: 参数描述 name 必需。规定要设置的属性名。 value 必需。规定要设置的属性值。代码实例: window.onload=function(){ var

关于 Window.setAttributes(LayoutParams a) 的一些操作全屏 ,设置亮度关闭键盘灯等

梦想无论怎样模糊，总潜伏在我们心底，使我们的心境永远得不到安宁.

04-27

4312

package com.example.testkeylight; import android.app.Activity; import android.os.Bundle; import android.provider.Settings.SettingNotFoundException; import android.util.Log; import android.view.Menu;

JavaScript中的Attribute相关内容介绍

weixin_33924312的博客

01-04

651

Attribute是属性的意思，上面用蓝色表示的部分就是input标签中一个名为id的Attribute，用红色部分表示的是一个node（节点），文章仅对部分兼容IE和FF的Attribute相关的介绍。 attributes：获取一个属性作为对象 getAttribute：获取某一个属性的值 setAttribute：建立一个属性，并同时给属性捆绑一个值 create...

js 表单脚本

青蛙king的博客

06-04

1248

一、表单基础知识在 HTML 中，表单是由 <form> 元素表示的，而在 JavaScript 中，表单对应的则是 HTMLFormElement 类型。HTMLFormElement 继承了 HTMLElement，因此与其他 HTML 元素一样具有相同的默认属性。 1、HTMLFormElement 独有的属性和方法（1）、HTMLFormElement 独有的属性 acceptCharset：服务器能够处理的字符集，等价于 HTML 中的 accept-charset 特性。

各种通用方法

android 开发实录

11-03

432

不保证正确,自己看看,整理笔记用

遇到‘NodeList‘ object has no atteibute ‘getElementByTagName‘报错的解决坑

火柴丸子的博客

07-18

3907

遇到’NodeList’ object has no atteibute 'getElementByTagName’报错的解决坑最近在工作中遇到这个问题，折磨了我很长的时间，最后才找到了问题关键。下面来给大家简单的叙述一下，希望对你们有所帮助。

js中Attribute属性常见操作函数整理

徊忆羽菲

04-09

818

js中Attribute属性常见操作函数整理Attribute常见函数简介attributes的使用方法：（IE和FF通用）getAttribute的使用方法setAttribute的使用方法createAttribute的使用方法removeAttribute的使用方法Attribute属性注意getAttributeNode的使用方法setAttributeNode的使用方法removeAttributeNode的使用方法AttributeNode总结 Attribute常见函数简介 Attribut

自定义属性/tab栏切换知识简介

weixin_54259919的博客

10-24

355

自定义属性规范用处保存我的数据，使用这个数据 data-属性名="属性值" 方法集方法说明 var div = document.getElementById('data-index') 获取自定义属性所在的标签 div.getAttribute('自定义属性') 获取自定义属性值 div.setAttribute('自定义属性'，'值') 设置修改自定义属性值 div.setAttribute('class'，'新的类名') 修改...

setAttribute给元素设置属性

y18774585870的博客

12-08

498

var top1 = document.getElementById('top').getElementsByTagName('li') var bot1 = document.getElementById('bottom').getElementsByTagName('div') for(var i= 0;i<top1.length;i++){ top1[i].setAttribute('index',i+1) var index = top1[i].getAttribute

差比和算法的妙处