js操作元素内容，获取input值，操作元素属性，img的src操作标签样式，操作元素样式，和批量样式设置

最新推荐文章于 2024-04-14 22:13:18 发布

silence^

最新推荐文章于 2024-04-14 22:13:18 发布

阅读量982

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/lyclyc_/article/details/107431250

版权

操作元素属性

操作属性

获取
- 元素.属性名
- 元素[“属性名”] 元素[变量];
设置
- 元素.属性名 = “属性值”;
- 元素[“属性名”] = “属性值”;
  
  元素[变量] = “属性值”;
注意: class作为保留字, 不能直接使用, className
区别: 所有点的方式都可以换成中括号, 中括号中属性名要加引号, 中括号中可以用变量, 点的方式不能用变量
操作元素属性代码及例子详解如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        
        #a {
            font-size: 100px;
            /* 300px只是为了让看到下面比较明显 */
        }
        
        .box {
            background-color: pink;
        }
        
        .b {
            color: orange;
        }
        
        #c {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div id="box" class="box">12345</div>
    <button id="btn">按钮</button>
    <script>
        // 获取元素输出的第一种方式：元素.属性名
        // 设置元素属性第一种方式：
        // 元素.属性名="属性值"
        var box1 = document.getElementById('box');
        var btn = document.getElementById('btn');
        console.log(box1);
        // 打印出来的box1是<div id="box">12345</div>这整个标签内容。
        btn.onclick = function() {
            box1.id = "a";
            // box1是存储到变量里面的这个标签。
            // 理解为标签.属性名="属性值"
            // box1.className = 'b';
            // 因为class是保留字，所以不能写成box1.class='b'，
            // 保留字不能作为变量名，也不能作为属性名。
            // 上面这种方式相当于直接重置了标签的类名，不是在原有的基础上加变量名，而且直接把原有的改变了。
            // 下面这种可以保留原有的。
            var y = box1.className;
            box1.className = y + ' b';
            // 因为在标签中，类名也是用空格隔开的
            // 获取元素属性的第二种方式：
            // 元素["属性名"]  元素[变量]
            // 设置元素属性的第二种方式
            // 元素["属性名"]="属性值";
            // 元素[变量]="属性值";
            console.log(box1.id);
            console.log(box1["id"]);
            var cn = 'id';
            // 上面这个这样写获取到的id就是字符串。
            console.log(cn); //打印结果为id
            console.log(box1.cn); //结果为undefined
            // 为undefined的原因是：box1后面跟的应该是属性名，而cn是变量，变量无法用