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

2024-08-09 09:23:06 浏览数 (5)
一、案例需求

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

将其设置到 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 ;

代码语言：javascript复制
        /* 全部元素的通用样式设置 */
        
        * {
            /* 去除所有元素的外边距（margin） */
            margin: 0;
            /* 去除所有元素的内边距（padding） */
            padding: 0;
        }

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

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

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

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

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

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

代码语言：javascript复制
        /* 设置所有 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; , 该元素会脱离正常的 标准流 , 并向其浮动方向排列 ;

代码语言：javascript复制
        .box li {
            /* 将 li 元素浮动到左侧，使它们在同一行显示 */
            float: left;

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

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

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

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

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

代码语言：javascript复制
        /* 设置 .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 属性 , 以调整精灵图中每个图像的位置 ;

代码语言：javascript复制
        // 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、代码示例

代码示例 :

代码语言：javascript复制
<!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>

2、执行效果

容器 web 布局 浏览器 javascript

1 人点赞