样式属性操作案例

最新推荐文章于 2024-08-22 14:32:34 发布

热身就犯困

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量35

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_73805336/article/details/130546565

版权

文章展示了前端开发中的几种常见技术实现，包括利用CSS精灵图的循环展示，文本框的隐藏和显示功能，密码框的验证信息提示，以及实现表格隔行换色和表单的全选、取消全选功能。这些技术涉及到DOM操作、事件监听和样式控制等基础知识。

摘要由CSDN通过智能技术生成

1.循环精灵图

核心思想：运用for循环，修改精灵图的背景位置background-position

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    // 1.获取元素
    var lis = document.querySelectorAll('li');
    for (var i = 0;i<lis.length;i++){
        var index = i*44;
        lis[i].style.backgroundPosition = '0 -'+ index +'px';
    }
</script>

2.隐藏和显示文本框内容

获得焦点 onfocus 失去焦点 onblur

如果获得焦点，判断表单里的内容是否为默认文字，如果是默认文字，清空表单内容

  <style>
        input {
            color: #999;

        }
    </style>
</head>
<body>
    <input type="text" value="手机">
    <script>
        var text = document.querySelector('input');
        text.onfocus = function() {
           if(this.value === '手机') {
                this.value = '';
           }
           this.style.color = '#333';
        }
        text.onblur = function() {
            if(this.value === '') {
                this.value = '手机';
            }
            this.style.color = '#999';
        }
    </script>
</body>
</html>

3密码框验证信息

<style>
        div {
            width: 600px;
            margin: 100px auto;
        }
        .message {
            display:inline-block;
            font-size: 12px;
            color: #999;
            background: url(图片/user.png) no-repeat left center;
            padding-left: 50px;
        }
        .wrong {
            color:red;
            background: url(图片/btn.png) no-repeat left center;
        }
        .right{
            color:chartreuse;
        }
    </style>
</head>
<body>
    <div class="register">
        <input type="password" class="ipt">
        <P class="message">请输入6~16位密码</P>
    </div>
    <script>
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        ipt.onblur = function() {
            if(this.value.length < 6 || this.value.length > 16 ) {
                message.className = 'message wrong';
            }else{
                message.className = 'message right';
            }
        }
    </script>
</body>
</html>

4百度换肤效果

<body>
    <ul class="baidu">
        <li><img src="图片/1.png" alt=""></li>
        <li><img src="图片/2.png" alt=""></li>
        <li><img src="图片/3.png" alt=""></li>
    </ul>
    <script>
        // 1.获取元素
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        // console.log(imgs);
        // 2.循环注册事件
        for (var i = 0;i < imgs.length ; i++) {
            imgs[i].onclick = function() {
                // this.src  就是我们点击图片的路径
                // 把这个路径  this.src  给body  
                document.body.style.backgroundImage = 'url('+this.src+')';
            }
        }
    </script>
</body>
</html>

5表格隔行换色效果

鼠标经过事件 onmouseover 鼠标离开 onmouseout

核心思路：鼠标经过tr行，当前行背景换色

6表单全选和取消全选

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" >
                    </td>
                    <td>iphone</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>iphone5</td>
                    <td>6000</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        // 1.全选和取消全选做法： 让下面所有复选框checked属性（选中状态）跟随  全选按钮即可
        var j_cbAll = document.getElementById('j_cbAll');
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
        j_cbAll.onclick = function() {
            for(var i=0;i<j_tbs.length;i++) {
                j_tbs[i].checked = this.checked;
            }
        }
        // 2.下面复选框需要全部选中，上面全选才能选中做法； 给下面所有复选框绑定点击事件，每次点击，都要循环
        for(var i = 0;i<j_tbs.length;i++){
            j_tbs[i].onclick = function() {
                // flag  控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查4个小按钮是否全被选中
                for(var i = 0; i < j_tbs.length ; i++){
                    if(!j_tbs[i].checked){
                        flag = false;
                        break;
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>
</body>
</html>

热身就犯困

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
样式属性操作案例

核心思想：运用for循环，修改精灵图的背景位置background-position。鼠标经过事件 onmouseover 鼠标离开 onmouseout。如果获得焦点，判断表单里的内容是否为默认文字，如果是默认文字，清空表单内容。获得焦点 onfocus 失去焦点 onblur。核心思路：鼠标经过tr行，当前行背景换色。
复制链接

扫一扫