【Web APIs】JavaScript 操作元素 ② ( 修改元素属性 | 直接访问属性 | 使用setAttribute、getAttribute 和 removeAttribute访问属性 )

韩曙亮

发布于 2024-08-09 08:49:23

1360

发布于 2024-08-09 08:49:23

文章被收录于专栏：韩曙亮的移动开发专栏

JavaScript 中可以通过 DOM ( 文档对象模型 ) 操作来修改网页的内容 , 结构 , 样式 , 属性 ;

在【Web APIs】JavaScript 操作元素 ① ( 修改元素内容 | innerText 属性修改元素文本内容 | innerHTML 属性修改元素 HTML 内容 ) 博客中介绍了使用

innerText 属性
innerHTML 属性

修改 DOM 元素标签内容的 ;

本篇博客开始介绍通过 DOM 操作修改元素属性 ;

一、修改元素属性

1、修改属性操作简介

在 JavaScript 中 , DOM 操作可以修改标签元素的属性 ;

图片标签 <img> , 可以修改 id、alt 、src、width / height 等属性 ;
- src : 图片的源文件路径 ;
- alt : 图片的替代文本 , 用于无法显示图片时显示 ;
- width / height : 图片的宽度和高度 ;
链接标签 <a> , 可修改 href、 target、 download 等属性 ;
- href : 链接的目标 URL ;
- target : 链接打开的目标窗口或框架 ;
- download : 设置链接下载文件的名称 ;
输入框标签 <input> , 可修改 type value placeholder disabled 等属性 ;
- type : 输入框的类型 , 如 text、checkbox、radio 等 ;
- value : 输入框的值 ;
- placeholder : 输入框的占位符文本 ;
- disabled : 是否禁用输入框 ;

2、直接访问属性

DOM ( Document Object Model ) 操作元素属性的最简单的方式 , 就是 " 直接访问属性 " , 使用 . 操作符直接访问标签元素的属性成员 ;

代码示例 : 在下面的代码中 ,

直接通过 element.id = 'newId'; 方式 , 修改元素的 id 属性值 ;
直接通过 element.style.color = 'blue'; 方式 , 修改元素的 style 属性样式的 color 属性值 ;

// 获取元素对象
let element = document.getElementById('myElementId');

// 设置属性
element.id = 'newId';
element.className = 'newClassName';

// 获取属性
let currentId = element.id;
let currentClass = element.className;

// 直接修改样式属性
element.style.color = 'blue';
element.style.fontSize = '16px';

完整代码示例如下 :

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
</head>

<body>
    <button id="myButton">Click me</button>
    <button id="myButton2">Click me</button>
    <div style="width: 200px; height: 200px; background-color: black;"></div>

    <script>
        // 注意 : HTML 文档加载顺序是从上到下加载 
        // 这里要先加载标签 , 然后加载 JavaScript 脚本

        // 根据 id 获取元素
        var bt = document.getElementById('myButton');
        var bt2 = document.getElementById('myButton2');

        // 使用 标签选择器获取元素
        var rect = document.querySelector('div');

        // 点击按钮 修改 div 布局的样式
        bt.onclick = function() {
            rect.style = "width: 300px; height: 300px; background-color: red;";
        }
        bt2.onclick = function() {
            rect.style.backgroundColor = "blue";
        }
    </script>
</body>

</html>

执行效果 :

初始状态 div 元素大小为 200x200 像素 ,
然后点击按钮 2 后 , 元素的背景变为蓝色 ,
点击按钮 1 后 , 元素大小变为 300x300 , 颜色变为红色 ;

3、使用 setAttribute、getAttribute 和 removeAttribute 方法访问属性

调用 DOM 元素 Element 类型的 setAttribute、getAttribute 和 removeAttribute 方法 , 也可以访问属性 , 这样可以直接写出通用代码 , 只需要变更字符串参数 , 即可实现批量修改元素属性 ;

setAttribute 方法用于设置指定元素的属性值 , 接收 2 个参数 :
- 第一个参数是要设置的属性名称 ;
- 第二个参数是要设置的属性值 ;

// 示例：设置元素的 id 属性为 "bt"
element.setAttribute('id', 'bt');

getAttribute 方法用于获取指定元素的属性值 , 接收 1 个参数 :
- 参数是要获取的属性名称 ;

// 示例：获取元素的 id 属性值
let titleValue = element.getAttribute('id');

removeAttribute 方法用于移除指定元素的属性 , 接受 1 个参数 :
- 参数是要移除的属性名称 ;

// 示例：移除元素的 id 属性
element.removeAttribute('id');

代码示例 :

// 设置属性
element.setAttribute('data-info', 'example');
element.setAttribute('title', 'This is a tooltip');

// 获取属性
let dataInfoValue = element.getAttribute('data-info');
let titleValue = element.getAttribute('title');

// 移除属性
element.removeAttribute('data-info');

完整代码示例 :

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

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
</head>

<body>
    <button id="myButton">Click me</button>
    <button id="myButton2">Click me</button>
    <div style="width: 200px; height: 200px; background-color: black;"></div>

    <script>
        // 注意 : HTML 文档加载顺序是从上到下加载 
        // 这里要先加载标签 , 然后加载 JavaScript 脚本

        // 根据 id 获取元素
        var bt = document.getElementById('myButton');
        var bt2 = document.getElementById('myButton2');

        // 使用 标签选择器获取元素
        var rect = document.querySelector('div');

        // 点击按钮 修改 div 布局的样式
        bt.onclick = function() {
            rect.setAttribute('style', 'width: 300px; height: 300px; background-color: red;');
        }
        bt2.onclick = function() {
            rect.setAttribute('style', 'width: 400px; height: 400px; background-color: blue;');
        }
    </script>
</body>

</html>

执行效果 :