HTMLDOM_innerHTML和HTMLDOM_样式控制

HTMLDOM_innerHTML

<body>
    <div id="div1">
        div
    </div>

    <script>
        var div = document.getElementById("div1");
        var innerHTML = div.innerHTML;
        //div标签中替换一个文本输入框
        div.innerHTML = "<input type='text'>";
        //div标签中追加一个文本输入框
        div.innerHTML += "<input type='text'>";
    </script>

</body>

使用innerHTML优化上述案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        table{
            border:1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="id" placeholder="请输入编号">
        <input type="text" id="name" placeholder="请输入姓名">
        <input type="text" id="gender" placeholder="请输入性别">
        <input type="button" value="添加" id="btn_add" >
    </div>
    <table id="table">
        <caption>学生信息表</caption><!--caption 元素定义表格标题-->
        <tr>
            <th>编号</th><!--th 定义表头单元格-->
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>男1</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td><!--这里的 this 表示删除的是此节点-->
        </tr>
        <tr>
            <td>2</td>
            <td>男2</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>男3</td>
            <td>男</td>
            <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
        </tr>
    </table>

<script>
    //使用innerHtml添加
    document.getElementById("btn_add").onclick=function () {
        //获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
        //获取table
        var table = document.getElementsByTagName("table")[0];
        //追加一行
        table.innerHTML +="<tr>\n" +
            "            <td>"+id+"</td>\n" +
            "            <td>"+name+"</td>\n" +
            "            <td>"+gender+"</td>\n" +
            "            <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\">删除</a></td>\n" +
            "        </tr>";
    }
    /*
        1.确定点击的是哪一个超链接
            onclick="delTr(this);"
        2.删除
            removeChild()：通过父节点删除子节点
     */
    function delTr(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>
</body>
</html>

HTMLDOM_样式控制

控制元素样式：

　　1.使用元素的style属性来设置

　　 2.提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTMLDOM</title>
    <style>
        .d1{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .d2{
            border: 1px solid blue;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<!--HTML_DOM_样式控制-->
<div id="div1">
    div1
</div>

<div id="div2">
    div2
</div>
<script>
    var div1 = document.getElementById("div1");
    div1.onclick = function () {
        //修改样式方式1
        div1.style.border = "1px solid red";
        div1.style.width = "200px";
        //font-size-->fontSize
        div1.style.fontSize = "20px";
    }

    var div2 = document.getElementById("div2");
    div2.onclick = function () {
        div2.className = "d1";
    }

</script>
</body>
</html>

 

 

posted @ 2022-08-04 10:14  魔光领域  阅读(38)  评论(0)  编辑  收藏  举报