642 HTMLDOM_inner HTML and 643 HTMLDOM_样式控制

Html dom

　　1.标签体的设置和获取：innerHTML

　　2.使HTML元素对象的属性

<script>  
//使用innerHTML添加
          document.getElementById("btn_add").onclick = function () {
          //获取文本框内容
          var id = document.getElementById("id").value;
          var name = document.getElementById("name").value;
          var table = document.getElementById("table").value;

          //获取table
          var table = document.getElementsByName("table")[0];

          //追加一行
          table.innerHTML += "<tr>\n" +
                  "                  <td>"+id+"</td>\n" +
                  "                  <td>"+name+"</td>\n" +
                  "                  <td>"+gender+"</td>\n" +
                  "                  <!--删除链接-->\n" +
                  "                  <td><a href=\"javascript:void(0);\"  onclick=\"delTr(this);\">删除</a></td>\n" +
                  "            </tr>";

          }

</script>

　　3.控制元素样式

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

<script>
        //获取元素对象
        var div1 = document.getElementById("div1");
        //绑定单机事件
        div1.onclick = function () {
            //修改样式方式1
            //一个像素的 边框 为 红色
            div1.style.border = "1px solid red";
            //设置宽
            div1.style.widows = "200px";
            //font-size
            div1.style.fontSize = "20px";
        }
</script>

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

<style>
        .id1{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .id2{
            border: 1px solid blue;
            width: 200px;
            height: 200px;
        }
    </style>


    <script>
//获取元素对象
        var div2 = document.getElementById("div2");
        //绑定单机事件
        div2.onclick = function () {
            div2.className = "id1";
        }
</script>