Css、javascript、dom(一)

一：Css

1.1：position定义和用法

position 属性规定元素的定位类型。

可能的值

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

查看完整代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

       <style type="text/css">

        .box {

            border:1px solid #f60; width:100px; height:100px; margin:0 auto;

            -webkit-border-radius:50px;

            -moz-border-radius:50px;

            -o-border-radius:50px;

            border-radius:50px;

            }

    </style>

</head>

<body>

    <div style="position: relative;width: 500px;height: 300px;border: 2px solid red;margin:0 auto">

        <div style="position: absolute;width: 50px;height: 50px;background-color: black;left: 0;bottom: 0"></div>

        <div style="position: absolute;width: 50px;height: 50px;background-color: blue;right: 0;bottom: 0"></div>

        <div style="position: absolute;width: 50px;height: 50px;background-color: red;right: 0;top: 0"></div>

        <div style="position: absolute;width: 50px;height: 50px;background-color: darkgoldenrod;top: 0;bottom: 0"></div>

        <div class="box" style="position: absolute;

        top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;"></div>

    </div>

</body>

</html>

position

二：Dom

1、找到标签

获取单个元素 document.getElementById('i1')

获取多个元素（列表）document.getElementsByTagName('div')

获取多个元素（列表）document.getElementsByClassName('c1')

a. 直接找

document.getElementById 根据ID获取一个标签

document.getElementsByName 根据name属性获取标签集合

document.getElementsByClassName 根据class属性获取标签集合

document.getElementsByTagName 根据标签名获取标签集合

b. 间接

tag = document.getElementById('i1')

parentElement // 父节点标签元素

children // 所有子标签

firstElementChild // 第一个子标签元素

lastElementChild // 最后一个子标签元素

nextElementtSibling // 下一个兄弟标签元素

previousElementSibling // 上一个兄弟标签元素

2、操作标签

a. innerText

获取标签中的文本内容

标签.innerText

对标签内部文本进行重新复制

标签.innerText = ""

b. className

tag.className =》直接整体做操作

tag.classList.add('样式名') 添加指定样式

tag.classList.remove('样式名') 删除指定样式

PS：

function func(){

}

</script>

c. checkbox

获取值

checkbox对象.checked

设置值

checkbox对象.checked = true

查看完整代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

          display: none;

        }

        .c1{

            position: fixed;

            left: 0;

            right: 0;

            top: 0;

            bottom: 0;

            background-color: black;

            opacity: 0.6;

            z-index: 9;

        }

        .c2{

            width: 500px;

            height: 400px;

            background-color: white;

            position: fixed;

            left: 50%;

            top: 50%;

            margin-left: -250px;

            margin-top: -200px;

            z-index: 10;

        }

    </style>

</head>

<body style="margin: 0">

    <div>

        <input type="button" value="添加" onclick="ShowModel()"/>

        <input type="button" value="全选" onclick="ChooseAll()"/>

        <input type="button" value="取消" onclick="CancleAll()"/>

        <input type="button" value="反选" onclick="ReverseAll()"/>

        <table>

            <thead>

                <tr>

                    <th>选择</th>

                    <th>主机名</th>

                    <th>端口</th>

                </tr>

            </thead>

            <tbody id="tb">

                <tr>

                    <td><input type="checkbox" /></td>

                    <td>1.1.1.1</td>

                    <td>10</td>

                </tr>

                 <tr>

                     <td><input type="checkbox" /></td>

                    <td>1.1.1.2</td>

                    <td>20</td>

                </tr>

                <tr>

                    <td><input type="checkbox" /></td>

                    <td>1.1.1.3</td>

                    <td>30</td>

                </tr>

            </tbody>

        </table>

    </div>

    <div id="i1" class="c1 hide"></div>

    <div id="i2" class="c2 hide">

        <p><input type="text" /></p>

        <p><input type="text" /></p>

        <p>

            <p><input type="button" value="取消" onclick="HideModel();" /></p>

            <p><input type="button" value="确定" /></p>

        </p>

    </div>

    <script>

        function ShowModel() {

            document.getElementById('i1').classList.remove('hide');

            document.getElementById('i2').classList.remove('hide');

        }

        function HideModel() {

            document.getElementById('i1').classList.add('hide');

            document.getElementById('i2').classList.add('hide');

        }

        function ChooseAll() {

            var tbody = document.getElementById('tb');

            var tr_list = tbody.children;

            for(var i=0;i<tr_list.length;i++){

                var current_tr = tr_list[i];

                var checkbox = current_tr.children[0].children[0];

                checkbox.checked = true;

            }

        }

        function CancleAll() {

            var tbody = document.getElementById('tb');

            var tr_list = tbody.children;

            for(var i=0;i<tr_list.length;i++){

                var current_tr = tr_list[i];

                var checkbox = current_tr.children[0].children[0];

                checkbox.checked = false;

            }

        }

        function ReverseAll() {

            var tbody = document.getElementById('tb');

            var tr_list = tbody.children;

            for(var i=0;i<tr_list.length;i++){

                var current_tr = tr_list[i];

                var checkbox = current_tr.children[0].children[0];

                if(checkbox.checked) {

                    checkbox.checked = false;

                }else {

                        checkbox.checked = true;

                    }

                }

        }

    </script>

</body>

</html>

模态对话框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .item .header{

            height: 35px;

            background-color: #2459a2;

            color: white;

            line-height: 35px;

        }

    </style>

</head>

<body>

    <div style="height: 48px"></div>

    <div style="width: 300px">

        <div class="item">

            <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div>

            <div class="content">

                <div>内容1</div>

                <div>内容1</div>

                <div>内容1</div>

            </div>

        </div>

        <div class="item">

            <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div>

            <div class="content hide">

                <div>内容2</div>

                <div>内容2</div>

                <div>内容2</div>

            </div>

        </div>

        <div class="item">

            <div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div>

            <div class="content hide">

                <div>内容3</div>

                <div>内容3</div>

                <div>内容3</div>

            </div>

        </div>

        <div class="item">

            <div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div>

            <div class="content hide">

                <div>内容4</div>

                <div>内容4</div>

                <div>内容4</div>

            </div>

        </div>

    </div>

    <script>

        function ChangeMenu(nid){

            var current_header = document.getElementById(nid);

            var item_list = current_header.parentElement.parentElement.children;

            for(var i=0;i<item_list.length;i++){

                var current_item = item_list[i];

                current_item.children[1].classList.add('hide');

            }

            current_header.nextElementSibling.classList.remove('hide');

        }

    </script>

</body>

</html>

后台管理