今日webAPI知识点总结

最新推荐文章于 2025-03-31 21:51:48 发布

原创最新推荐文章于 2025-03-31 21:51:48 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

本文阐述了offsetLeft与style.left的区别，前者返回数值类型，后者返回字符串；前者只读，后者可读写；前者无需预定义位置，后者需要。并通过一个轮播图实例展示了这些属性的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

offsetLeft与style.left的区别

offsetLeft 获取的是相对于父对象的左边距

left 获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距

如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值，
这同offsetLeft是相同的，区别在于：
1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算，
还用offsetLeft比较方便。
2. style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left。
3. style.left的值需要事先定义，否则取到的值为空。而且必须要定义在html里，我做过试验，如果定义在
css里，style.left的值仍然为空，这就是我刚开始碰到的问题，总是取不到style.left的值。

offsetLeft则仍然能够取到，无需事先定义div的位置。

轮播图参考案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            overflow: hidden;
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        .all ol li.current {
            background: #DB192A;
        }

        #arr {
            display: none;
        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
</head>
<body>
<div class="all" id='box'>
    <div class="screen"><!--相框-->
        <ul>
            <li>
                <img src="images/1.jpg" width="500" height="200"/>
            </li>
            <li>
                <img src="images/2.jpg" width="500" height="200"/>
            </li>
            <li>
                <img src="images/3.jpg" width="500" height="200"/>
            </li>
            <li>
                <img src="images/4.jpg" width="500" height="200"/>
            </li>
            <li>
                <img src="images/5.jpg" width="500" height="200"/>
            </li>
        </ul>
        <ol>
        </ol>
    </div>
    <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
<script src="common.js"></script>
<script>
    //获取最外面的div
    var box = my$("box");
    //获取相框
    var screen = box.children[0];
    //获取相框的宽度
    var imgWidth = screen.offsetWidth;
    //获取ul
    var ulObj = screen.children[0];
    //获取ul中的所有的li
    var list = ulObj.children;
    //获取ol
    var olObj = screen.children[1];
    //焦点的div
    var arr = my$("arr");

    var index = 0;//记录索引

    //1.创建小按钮----根据ul中li的个数
    for(var i = 0 ; i < list.length; i++){
        var liObj = document.createElement("li");
        olObj.appendChild(liObj);
        liObj.innerHTML = i+1;
        liObj.setAttribute("index",i);
        //注册鼠标进入事件
        liObj.onmouseover = function () {
            //先移出所有的背景颜色
            for(var j = 0 ; j < olObj.children.length; j++){
                olObj.children[j].removeAttribute("class")
            }
            //设置当前的li的背景颜色
            this.className = "current";
            //获取鼠标进入li的当前索引值
            index = this.getAttribute("index");
            //调用动画
            animate(ulObj, -index*imgWidth);
        }

    }


    //设置ol中第一个li的背景颜色
    olObj.children[0].className = "current";

    //克隆ul中的第一个li, 追加到ul的最后
   ulObj.appendChild(ulObj.children[0].cloneNode(true));

   //2.自动播放
    var timeId = setInterval(move, 2000);

    //3.鼠标移入显示焦点左右的div, 并且清除定时器
    box.onmouseover = function () {
        arr.style.display = "block";
        clearInterval(timeId);
    }
    //鼠标移出显示焦点左右的div, 并且开启定时器
    box.onmouseout = function () {
        arr.style.display = "none";
        timeId = setInterval(move, 2000);
    }

    //4.点击右边按钮
    my$("right").onclick = move;

    //点击左边按钮
    my$("left").onclick = function () {
        if( index == 0){
            index = 5;
            ulObj.style.left = -index*imgWidth +"px";
        }
        index--;
        animate(ulObj, -index*imgWidth);
        //先干掉所有小按钮的样式
        for(var i = 0 ; i < olObj.children.length; i++){
            olObj.children[i].removeAttribute("class")
        }
        //设置对应的按钮颜色
        olObj.children[index].className = "current";

    }

    //封装自动播放的函数
    function move() {
        if(index == list.length -1){
            //瞬间跳转到第一张图
            ulObj.style.left = 0+"px";
            index = 0;

        }

        index++;
        animate(ulObj, -index*imgWidth);

        //判断按钮的背景颜色, 如果index = 最后一个值的时候, 瞬间设置设置第一个的按钮颜色
        if( index == list.length - 1){
            //设置第一个的按钮颜色
            olObj.children[0].className = "current";
            //清除最后一个按钮的颜色
            olObj.children[olObj.children.length -1].className = "";
        }else{
            //更改小按钮的样式
            for(var i = 0 ; i < olObj.children.length; i++){
                olObj.children[i].removeAttribute("class")
            }
            //设置对应的li的背景颜色
            olObj.children[index].className = "current";
        }

    }
</script>


</body>
</html>