element对象

Posted 2021-02-10 zjm1999

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了element对象相关的知识，希望对你有一定的参考价值。

1.getAttribute获取属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>element对象</title>
</head>
<body>
    <!-- 
     getAttribute属性名
     -->
    <input type="text" id="inputid" value="加油啊,进度有点慢呢">
    <script type="text/javascript">
    var input1 = document.getElementById("inputid");
    //getAttribute得到属性里面的值
    alert(input1.getAttribute("value"));
    alert(input1.getAttribute("id"));
    </script>
</body>
</html>

技术图片

2.setAttribute设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>element对象</title>
</head>
<body>
    <!-- 
     getAttribute属性名
     -->
    <input type="text" id="inputid" value="加油啊,进度有点慢呢">
    <script type="text/javascript">
    var input1 = document.getElementById("inputid");
    //设置属性值
    alert(input1.getAttribute("class"));
    input1.setAttribute("class","果子一定要加油");
    alert(input1.getAttribute("class"));
    </script>
</body>
</html>

技术图片

3.removeAttribute删除属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>element对象</title>
</head>
<body>
    <!-- 
     getAttribute属性名
     -->
    <input type="text" name="果子请你拼命,不然你会一事无成" id="inputid" value="加油啊,进度有点慢呢">
    <script type="text/javascript">
    var input1 = document.getElementById("inputid");
    //removeAttribute删除属性
    alert(input1.getAttribute("name"));
    input1.removeAttribute("name");
    alert(input1.getAttribute("name"));
    </script>
</body>
</html>

技术图片

注意:removeAttribute不能删除value属性

以上是关于element对象的主要内容，如果未能解决你的问题，请参考以下文章

TP5报如下的错误 Indirect modification of overloaded element of thinkpaginatorCollection has no effect(代码片段

DOM探索之基础详解——学习笔记

maven web项目的web.xml报错The markup in the document following the root element must be well-formed.(代码片段

VSCode自定义代码片段5——HTML元素结构