DOM 查询方法及操作内部样式查询方法按照ID查询按照class查询按照Tag查询操作内部样式获取样式操作

查询方法

按照ID查询

document.getElementById("id")

// demo
// HTMl
<body>
  <div id="main">
    <div id="content"></div>
  </div>
</body>

// Script
const mainDom = document.getElementById('main');

const contentDom = document.getElementById('content');

按照class查询

// demo
// HTMl
<body>
  <div id="main">
    <div id="content">
      <p class="info test">info1</p>
      <p class="info">info2</p>
      <p class="info">info3</p>
    </div>
  </div>
</body>

// Script
const mainDom = document.getElementById('main');
const infoDomList2 = mainDom.getElementsByClassName('info test');

按照Tag查询

    <form name="reg">
        <p>
            <label>用户名：</label>
            <input type="text" name="user">
        </p>
        <p>
            <label>密码</label>
            <input type="password" name="password">
        </p>
        <p>
            <label>密码问题：</label>
            <input type="text" name="question">
        </p>
        <p>
            <label>密码答案</label>
            <input type="text" name="answer">
        </p>
        <p>
            <input type="button" value="提交" onclick="show()">
        </p>
    </form>
    <script>
        function show(){
            var answer = document.reg.answer.value;
            var answer = document.forms[0].answer.value; 
            var answer = document.forms[0].input[3].value
            var answer = document.getElementsByTagName("input")[3].value
        }
    </script>

操作内部样式

获取样式

获取的样式必须是内联样式才可以


<body>
    <div class="box" id="box" onclick="show()" style="width: 500px;height:500px;"></div>
</body>
<script>
     function show(){
         var box = document.getElementById("box");
         alert(box.style.width);
     }
</script>

操作内部样式

html 及 css样式如下：

<body>
    <div id="box"></div>
    <button id="btn" onclick="changeClass()">添加样式</button>
</body>
   // css 样式
    * {
        margin: 0;
        padding: 0;
    }
    div {
        padding: 5px;
        border: 1px solid #ccc;
    }
    button {
        display: block;
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin: 0 auto;
    }
    /* 待添加的样式名 */
    .box {
        width: 300px;
        height: 200px;
        margin: 0 auto;
        background: chocolate;
    }

元素.style.样式名 = 样式值

1. className 属性可设置或返回元素的 class 属性。

元素.className = "class类名"

<script>
    function changeClass() {
        var box = document.getElementById("box");
        var btn = document.getElementById("btn");
        if (btn.innerHTML == "添加样式") {
            box.className = "box";
            btn.innerHTML = "删除样式"
        } else {
            box.className = "";
            btn.innerHTML = "添加样式"
        }
    }
</script>

2.classList属性用于在元素中添加，移除及切换 CSS 类

使用 add() 和 remove() 方法修改它

<script>
     function changeClass() {
         var box = document.getElementById("box");
         var btn = document.getElementById("btn");
         if (btn.innerHTML == "添加样式") {
             box.classList.add("box");
             btn.innerHTML = "删除样式";
         } else {
             box.classList.remove("box");
             btn.innerHTML = "添加样式";
         }
     }
</script>