Cssjavascriptdom

Posted Manger

tags:

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

一：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：
 
                <div onclick=\'func();\'>点我</div>
                <script>
                    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以上是关于Cssjavascriptdom的主要内容，如果未能解决你的问题，请参考以下文章
 

 python学习之路 CSSJavaScriptDom后续


 全栈工程师图谱


 微信小程序代码片段


 VSCode自定义代码片段——CSS选择器


 谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js


 片段和活动之间的核心区别是啥？哪些代码可以写成片段？