学习笔记，仅供参考，有错必究

文章目录

Web API

自定义属性操作

获取属性值

获取属性值的两种方式：

//第1种
element.属性
//第1种
element.getAttribute('属性');

区别：

获取方式区别
element.属性element.属性只能获取元素自带的属性，比如id, class
element.getAttribute('属性');element.getAttribute('属性');主要获取自定义的属性，比如我们自己定义data-index属性，就可以通过这种方式获取
  • 举个例子

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


</head>

<body>
    <div id="demo" data-index="1" class="nav">hh</div>
    <script>
        var div = document.querySelector('div');
        // 1. 获取元素的属性值
        // (1) element.属性
        console.log(div.id);
        //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('data-index'));
    </script>

</body>

</html>

查看DevTools：

设置属性值

设置属性值的两种方式：

//第1种
element.属性 = '值'
//第2种
element.setAttribute('属性', '值');

区别：

获取方式区别
element.属性 = '值'element.属性 = '值'只能设置元素自带的属性，比如id, class
element.setAttribute('属性', '值');element.getAttribute('属性');设置自定义的属性，比如我们自己定义data-index属性，就可以通过这种方式设置
  • 举个例子

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


</head>

<body>
    <div id="demo" data-index="1" class="nav">hh</div>
    <script>
        var div = document.querySelector('div');

        console.log(div.id);
        console.log(div.className);
        console.log(div.getAttribute('data-index'));

        // (1) element.属性= '值'
        div.id = 'test';
        div.className = 'your-body';
        // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
        div.setAttribute('data-index', 2);

        console.log(div.id);
        console.log(div.className);
        console.log(div.getAttribute('data-index'));
    </script>

</body>

</html>

查看DevTools：

移除属性

移除属性：

div.removeAttribute('属性');
# javascript
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

嵌入式作业（七）：基于Ardunio的STM32串口通信

嵌入式作业（七）0作业要求1Ardunio 完成STM32的串口通信（1）安装Ardunio IDE（2）stm32串口通信2关于 stduino IDE0作业要求安装 Ardunio IDE 和相关软件支持库，在Ardunio 完成STM32板子的串口通信程序：（1）持续向串口输出“Hello world！”；（2）当接收到“stop!”时，停止输出。网上有一个国人版的MCU集成开发平台， st

avatar CSDN学习社区

JDBC详解

JDBC文章目录JDBC什么是JDBC?JDBC驱动程序:Java使用JDBC访问数据库的步骤:设置classpath:Oracle连接字符串的书写格式:简单的例子:常用数据库的驱动程序及JDBC URL:Oracle数据库:SQL Server数据库MySQL数据库Access数据库PreparedStatement接口:JNDI-数据源（Data Source）与连接池（Connection

avatar CSDN学习社区

“模式识别与机器学习”学习笔记no2.再谈感知机

接**上篇：上篇主要进行了PLA，Pocket算法的理论过程分析和在给定数据集上利用pocket算法对数据集进行分类学习，得到错分数量最少的分类面。上篇中pocket算法的过程已经进行了编程和测试，框架已经建立了起来，这一篇主要上篇中没有提到或涉及不深的几个问题。1.数据集的构造。上篇是直接使用了题目给的向量，这次来根据正态分布来产生数据集。np.random.normal函数可以根据均值和方差生

avatar CSDN学习社区