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

2024-08-09 08:49:23 浏览数 (5)
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 属性值 ;
代码语言：javascript复制
// 获取元素对象
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';

完整代码示例如下 :

代码语言：javascript复制
<!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 个参数 :
    • 第一个参数是要设置的属性名称 ;
    • 第二个参数是要设置的属性值 ;
代码语言：javascript复制
// 示例：设置元素的 id 属性为 "bt"
element.setAttribute('id', 'bt');
  • getAttribute 方法用于 获取指定元素的属性值 , 接收 1 个参数 :
    • 参数是要获取的属性名称 ;
代码语言：javascript复制
// 示例：获取元素的 id 属性值
let titleValue = element.getAttribute('id');
  • removeAttribute 方法用于 移除指定元素的属性 , 接受 1 个参数 :
    • 参数是要移除的属性名称 ;
代码语言：javascript复制
// 示例：移除元素的 id 属性
element.removeAttribute('id');

代码示例 :

代码语言：javascript复制
// 设置属性
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');

完整代码示例 :

代码语言：javascript复制
<!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>

执行效果 :

脚本 javascript element web 布局

1 人点赞