【Web APIs】JavaScript 操作元素 ⑦ ( 多精灵图背景设置 | 核心要点 - 设置 backgroundPosition 属性 | 清除默认样式 | )

韩曙亮

发布于 2024-08-09 09:23:06

980

发布于 2024-08-09 09:23:06

文章被收录于专栏：韩曙亮的移动开发专栏

一、案例需求

给定一张精灵图 , 如下所示 :

将其设置到 Web 页面中 , 显示如下样式 :

二、案例核心要点分析

1、清除元素的默认内外边距样式 ★ ( 重点 )

HTML 标签元素都有自己的默认内边距和外边距样式 , 如下所示 :

<body> 元素 : 默认外边距常见为 8px 或 16px , 默认内边距常为 0 ;
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 元素 : 默认的上边距和下边距可能都在 16px 到 24px 之间 , 内边距通常为 0 ;
<p> 元素 : 默认的上边距和下边距为 16px 或 1em , 默认内边距 0 ;
<ul>, <ol> 元素 : 默认的上边距和下边距 16px 或 1em , 默认的左内边距 40px 或 2em ;
<li> 元素 : 默认外边距 0 , 默认的左内边距 20px 或 1em ;
<blockquote> 引用块元素 : 上边距和下边距可能都在 16px 到 32px 之间 , 左内边距为 40px 或 2em ;

本案例中 , 就使用了 <li> 元素进行页面结构布局 , 布局时需要使用到浮动样式 , 计算换行时 , 每个像素宽高都要精确计算 ;

如果要精确到像素级别进行布局 , 默认的内外边距 margin 和 padding 是不可接受的 , 必须将默认的内外边距取消 ;

下面的代码中 , 使用通用选择器 * 将网页上所有 HTML 元素的外边距 ( margin ) 和内边距 ( padding ) 都设置为 0 ;

        /* 全部元素的通用样式设置 */
        
        * {
            /* 去除所有元素的外边距（margin） */
            margin: 0;
            /* 去除所有元素的内边距（padding） */
            padding: 0;
        }

上述代码操作用于重置或初始化样式 , 使得所有元素的外边距和内边距都从相同的起点开始 ;

确保在不同浏览器中 , 元素的布局和对齐方式不会因为默认的外边距和内边距值而有所不同 , 从而减少跨浏览器的样式差异 ;

2、清除 li 元素的默认样式

li 标签元素的默认样式如下所示 , li 元素是块级元素 , 并且在左侧有小圆点 ;

块级元素会在页面上占据整行 , 前面的元素在上一行 , 后面的元素在下一行 ;

设置如下代码 , 可以清除左侧的小圆点 ;

        /* 设置所有 li 元素的样式 */
        
        li {
            /* 去除 li 元素的默认列表样式（如项目符号或数字） */
            list-style-type: none;
        }

3、ul 和 li 元素的块级元素本质

ul 和 li 元素都是块级元素 ;

<ul> 无序列表标签元素是一个块级元素 , 表示列表容器 , 该元素会在页面上占据整行 , 并在其前后添加换行 ;
<li> 列表项是一个块级元素 , 用于表示 </ul> 无序列表或 </ol> 有序列表中的一个条目 ; 每个 <li> 元素在其父容器中占据整行 , 尽管 <li> 元素内的内容可以是行内元素或块级元素 , <li> 元素本身作为一个列表项是块级元素 ;

块级元素特点 :

块级元素通常开始于新的一行 , 并且占据整个可用的宽度 ;
块级元素可以包含其他块级元素和行内元素 ;

行内元素特点 :

行内元素不会开始于新的一行 , 只在其包含块的行内显示 ;
行内元素的宽度仅限于其内容的宽度 ;

4、为 li 元素设置浮动 ★ ( 重点 )

当 li 元素设置了 float 浮动属性 , 如 : float: left; 或 float: right; , 该元素会脱离正常的标准流 , 并向其浮动方向排列 ;

        .box li {
            /* 将 li 元素浮动到左侧，使它们在同一行显示 */
            float: left;

浮动元素会从其所在块级容器的左侧或右侧开始排列 , 直到其内容的宽度被填满或者达到容器的边界 ,

当浮动元素的宽度总和超出其包含块的宽度时 , 后续的浮动元素会自动换行到下一行 ;

5、精灵图设置要点 ★ ( 重点 ) - 设置 backgroundPosition 属性

在该案例中 , 使用了精灵图技术来显示不同的背景图像 , 精灵图是一种将多个图像合并到一个单独图像文件中的技术 , 以减少网页加载时间 ;

精灵图的设置要点就是设置背景图像 background: url(images/sprite.png) no-repeat; , 设置了 li 元素的背景图像为 images/sprite.png , 并确保图像不重复 no-repeat ,

        /* 设置 .box 内部 li 元素的样式 */
        
        .box li {
            /* 将 li 元素浮动到左侧，使它们在同一行显示 */
            float: left;
            /* 设置 li 元素的宽度为 24 像素 */
            width: 24px;
            /* 设置 li 元素的高度为 24 像素 */
            height: 24px;
            /* 设置 li 元素的背景颜色为粉色 */
            background-color: pink;
            /* 设置 li 元素的外边距为 15 像素 */
            margin: 15px;
            /* 设置 li 元素的背景图像，背景不重复 */
            background: url(images/sprite.png) no-repeat;
        }

通过 JavaScript 动态设置 backgroundPosition 属性 , 以调整精灵图中每个图像的位置 ;

        // 1. 获取 box 元素 中的 li 元素
        var lis = document.querySelectorAll('li');

        // 2. 为每个 li 设置不同的精灵图
        for (var i = 0; i < lis.length; i++) {
            // 精灵图中 每个图片显示位置是 0,44 0,88 0,132 y 坐标是 44 的倍数
            // 显示第一张精灵图设置背景位置 0 0
            // 显示第二张精灵图设置背景位置 0 -44
            // 显示第三张精灵图设置背景位置 0 -88
            var start_height = i * 44;
            lis[i].style.backgroundPosition = '0 -' + start_height + 'px';
        }

三、完整代码示例

1、代码示例

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Style Operation Example</title>
    <style>
        /* 全部元素的通用样式设置 */
        
        * {
            /* 去除所有元素的外边距（margin） */
            margin: 0;
            /* 去除所有元素的内边距（padding） */
            padding: 0;
        }
        /* 设置所有 li 元素的样式 */
        
        li {
            /* 去除 li 元素的默认列表样式（如项目符号或数字） */
            list-style-type: none;
        }
        /* 设置 .box 类的样式 */
        
        .box {
            /* 设置 .box 元素的宽度为 250 像素 */
            width: 250px;
            /* 设置 .box 元素的上下外边距为 100 像素，并使其在水平居中 */
            margin: 100px auto;
        }
        /* 设置 .box 内部 li 元素的样式 */
        
        .box li {
            /* 将 li 元素浮动到左侧，使它们在同一行显示 */
            float: left;
            /* 设置 li 元素的宽度为 24 像素 */
            width: 24px;
            /* 设置 li 元素的高度为 24 像素 */
            height: 24px;
            /* 设置 li 元素的背景颜色为粉色 */
            background-color: pink;
            /* 设置 li 元素的外边距为 15 像素 */
            margin: 15px;
            /* 设置 li 元素的背景图像，背景不重复 */
            background: url(images/sprite.png) no-repeat;
        }
    </style>
</head>

<body>

    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <script>
        // 1. 获取 box 元素 中的 li 元素
        var lis = document.querySelectorAll('li');

        // 2. 为每个 li 设置不同的精灵图
        for (var i = 0; i < lis.length; i++) {
            // 精灵图中 每个图片显示位置是 0,44 0,88 0,132 y 坐标是 44 的倍数
            // 显示第一张精灵图设置背景位置 0 0
            // 显示第二张精灵图设置背景位置 0 -44
            // 显示第三张精灵图设置背景位置 0 -88
            var start_height = i * 44;
            lis[i].style.backgroundPosition = '0 -' + start_height + 'px';
        }
    </script>
</body>

</html>