当前位置:编程学习 > > 正文

javascript如何操作文档元素(JavaScript操作元素实例大全)

时间:2021-11-03 15:53:28类别:编程学习

javascript如何操作文档元素

JavaScript操作元素实例大全

操作元素内容参考之前文章:JavaScript WebAPI、DOM、事件、操作元素

案例:显示隐藏密码案例

核心思路: (操作表单元素属性)

javascript如何操作文档元素(JavaScript操作元素实例大全)

  • <style>
        .box{
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        .box input{
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        .box img{
            position:absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>
    <body>
        <li class="box">
            <label for="">
                <img src="./image/close.jpg" alt="javascript如何操作文档元素(JavaScript操作元素实例大全)" border="0" />
    
  • 案例:循环精灵图

    核心思路: (操作元素样式)

    javascript如何操作文档元素(JavaScript操作元素实例大全)

  • <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style-type: none;
        }
        .box{
            width: 250px;
            margin: 100px auto;
        }
        .box li{
            margin: 15px;
            float: left;
            width: 24px;
            height: 24px;
            background: url(./image/sprite.jpg" alt="javascript如何操作文档元素(JavaScript操作元素实例大全)" border="0" />
    
  • javascript如何操作文档元素(JavaScript操作元素实例大全)

    案例:密码框验证信息

    核心思路:(用className修改样式属性)

  • <style>
        li {
            width: 600px;
            margin: 100px auto;
        }
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(./image/mess.jpg" alt="javascript如何操作文档元素(JavaScript操作元素实例大全)" border="0" />
    
  • javascript如何操作文档元素(JavaScript操作元素实例大全)javascript如何操作文档元素(JavaScript操作元素实例大全)javascript如何操作文档元素(JavaScript操作元素实例大全)

    案例:背景换色

    核心思想:(操作元素样式属性)

    给4个小图片利用循环注册点击事件当点击了这个图片,让页面背景改为当前的图片核心算法: 把当前图片的src 路径取过来,给body 做为背景即可

    javascript如何操作文档元素(JavaScript操作元素实例大全)

  • <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: url(./image/1.jpg" alt="javascript如何操作文档元素(JavaScript操作元素实例大全)" border="0" />
    
  • 案例:表格换色

    核心思路:(排他思想)

    用到新的鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout核心思路:鼠标经过 tr 行,当前的行变背景颜色,鼠标离开去掉当前的背景颜色注意: 第一行(thead里面的行)不需要变换颜色,因此获取的是 tbody 里面的行

    javascript如何操作文档元素(JavaScript操作元素实例大全)

  • <style>
        table{
            width:800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        thead tr{
            height: 30px;
            background-color: skyblue;
        }
        tbody tr{
            height: 30px;
        }
        tbody td{
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        .bg{
            background-color: pink;
        }
    </style>
    <body>
        <table>
            <thead>
                <tr>
                    <th>代码</th>
                    <th>名称</th>
                    <th>最新公布净值</th>
                    <th>累计净值</th>
                    <th>前单位净值</th>
                    <th>净值增长率</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>003526</td>
                    <td>农银金穗3个月定期开放债券</td>
                    <td>1.075</td>
                    <td>1.079</td>
                    <td>1.074</td>
                    <td>+0.047%</td>
                </tr>
                <tr>
                    <td>003526</td>
                    <td>农银金穗3个月定期开放债券</td>
                    <td>1.075</td>
                    <td>1.079</td>
                    <td>1.074</td>
                    <td>+0.047%</td>
                </tr>
                <tr>
                    <td>003526</td>
                    <td>农银金穗3个月定期开放债券</td>
                    <td>1.075</td>
                    <td>1.079</td>
                    <td>1.074</td>
                    <td>+0.047%</td>
                </tr>
                <tr>
                    <td>003526</td>
                    <td>农银金穗3个月定期开放债券</td>
                    <td>1.075</td>
                    <td>1.079</td>
                    <td>1.074</td>
                    <td>+0.047%</td>
                </tr>
                <tr>
                    <td>003526</td>
                    <td>农银金穗3个月定期开放债券</td>
                    <td>1.075</td>
                    <td>1.079</td>
                    <td>1.074</td>
                    <td>+0.047%</td>
                </tr>
                <tr>
                    <td>003526</td>
                    <td>农银金穗3个月定期开放债券</td>
                    <td>1.075</td>
                    <td>1.079</td>
                    <td>1.074</td>
                    <td>+0.047%</td>
                </tr>
            </tbody>
        </table>
        <script>
            //获取元素
            var trs=document.querySelector('tbody').querySelectorAll('tr')
            //注册事件
            for(var i=0;i<trs.length;i++){
                trs[i].onmouseover=function(){
                    this.className='bg'
                }
                trs[i].onmouseout=function(){
                    this.className=''
                }
            }
        </script>
    </body>
    
    
  • 案例:表单全选和反选

    核心思想:

    javascript如何操作文档元素(JavaScript操作元素实例大全)

  • <style>
        *{
            padding: 0;
            margin: 0;
        }
        .wrap{
            width: 300px;
            margin: 100px auto 0;
        }
        table{
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        th,td{
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        th{
            background-color: #09c;
            font: bold 16px '微软雅黑';
            color: #fff;
        }
        td{
            font: 14px '微软雅黑';
        }
        tbody tr{
            background-color: #f0f0f0;
        }
        tbody tr:hover{
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <body>
        <li class="wrap">
            <table>
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="cbAll" />
                        </th>
                        <th>商品</th>
                        <th>价钱</th>
                    </tr>
                </thead>
                <tbody id="tb">
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>iPhone8</td>
                        <td>8000</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>iPad Pro</td>
                        <td>5000</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>iPad Air</td>
                        <td>2000</td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>Apple Watch</td>
                        <td>2000</td>
                    </tr>
                </tbody>
            </table>
        </li>
        <script>
            //获取元素
            var cbAll = document.getElementById('cbAll'); //全选按钮
            var tbs = document.getElementById('tb').getElementsByTagName('input'); //所有复选框按钮
            //注册事件
            //全选
            cbAll.onclick = function () {
                for (var i = 0; i < tbs.length; i++) {
                    tbs[i].checked = this.checked;
                }
            }
            //反选
            for (var i = 0; i < tbs.length; i++) {
                tbs[i].onclick = function () {
                    var flag = true //控制全选按钮
                    // 每次点击复选框都要检查是否全选
                    for (var i = 0; i < tbs.length; i++) {
                        if (tbs[i].checked == false) {
                            flag = false
                            break
                        }
                    }
                    cbAll.checked = flag
                }
            }
        </script>
    </body>
    
    
  • 案例:tab栏切换

    核心思想:(排他思想)

  • <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style-type: none;
        }
        .tab{
            width:978px;
            margin: 100px auto;
        }
        .tab_list{
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        .tab_list li{
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        .tab_list .current{
            background-color: #c81623;
            color: #fff;
        }
        .item{
            display: none;
        }
        .item_info{
            padding: 20px 0 0 20px;
        }
    </style>
    <body>
        <li class="tab">
            <li class="tab_list">
                <ul>
                    <li class="current">商品介绍</li>
                    <li>规格与包装</li>
                    <li>售后保障</li>
                    <li>商品评价(50000)</li>
                    <li>手机社区</li>
                </ul>
            </li>
            <li class="tab_con">
                <li class="item" style="display: block;">
                    商品介绍模块内容
                </li>
                <li class="item">
                    规格与包装模块内容
                </li>
                <li class="item">
                    售后保障模块内容
                </li>
                <li class="item">
                    商品评价(50000)模块内容
                </li>
                <li class="item">
                    手机社区模块内容
                </li>
            </li>
        </li>
        <script>
            //获取元素
            var lis = document.querySelector('.tab_list').querySelectorAll('li');
            var items = document.querySelectorAll('.item');
            //注册事件
            for (var i = 0; i < lis.length; i++) {
                //给li元素设置索引号
                lis[i].setAttribute('index', i);
                lis[i].onclick = function () {
                    //选项卡内容
                    //清除所有li的current类
                    for (var i = 0; i < lis.length; i++) {
                        lis[i].className = '';
                    }
                    //给自身添加current类
                    this.className = 'current';
    
                    //显示内容
                    var index = this.getAttribute('index');
                    //清除其余item的内容
                    for (var i = 0; i < items.length; i++) {
                        items[i].style.display = 'none';
                    }
                    //让自身item的内容显示
                    items[index].style.display = 'block';
                }
            }
        </script>
    </body>
    
    
  • javascript如何操作文档元素(JavaScript操作元素实例大全)

    总结

    到此这篇关于JavaScript操作元素的文章就介绍到这了,更多相关js操作元素内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐