通过JS给HTML标签元素增加属性、删除属性及获取属性的值

我们在实际开发过程中需要通过JavaScript来对HTML标签元素的属性进行相关的操作.

例如:

1.需要获取html标签元素的属性值

2.期望增加html标签元素的属性以及对值的值

3.删除html标签属性

下面我们通过对Video标签元素的controls属性来进行操作

Video controls 属性

1.通过ID或者其他元素找到要处理的HTML对象:

var obj=document.getElementById('idvideo');

2.操作此html属性对象的3种方法

添加属性:obj.setAttribute('controls','true');
获取属性值:obj.getAttribute('controls');
删除属性:obj.removeAttribute('controls');

完整html及js代码如下:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通过JS给HTML标签元素增加属性、删除属性及获取属性的值 xinbiancheng.cn</title>
    <style>
        video {
            width: 300px;
            height: 300px;
            background-color: #000;
        }
    </style>
</head>

<body>
    <video id="idvideo" src=""></video>
    <div>
        <button onclick="AddAttr()">增加属性</button>
        <button onclick="GetAttr()">获取属性的内容</button>
        <button onclick="RemAttr()">删除属性</button>
    </div>
    <script>
        //通过getElementById获取标签元素
        var obj = document.getElementById('idvideo');
        // 增加属性和内容
        function AddAttr() {
            obj.setAttribute("controls", "true")
        }
        // 获取属性的内容
        function GetAttr() {
            alert(obj.getAttribute("controls"));
        }
        // 删除属性
        function RemAttr() {
            obj.removeAttribute("controls");
        }
    </script>
</body>

</html>

期望了解 更多事件及属性的操作 Web APIs视频教程 第03章-事件和样式操作及案例