html+css+js一些新属性知识点

CSS Grid布局中的subgrid的作用，以及适用场景

subgrid表示子网格，并不是一个CSS属性，而是 grid-template-columns和grid-template-rows属性支持的关键字，需要外面已经有个Grid布局。

什么时候使用subgrid ？

Grid布局负责大的组织结构，而里面更细致的排版对齐效果，则可以使用subgrid布局

比如一个项目列表页面，其中列表其中还有很多项，而其中的描述内容有多有少，无论内容多少，每一行这块的高度都要保持一致，这时候就可以使用subgrid实现Grid子项对齐。
        

　　

      .container {
            display: grid;
            gap: 1rem;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        }
        .item {
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 4;
            gap: .5rem;
        }
        .item {
            padding: .75rem;
            background: #f0f3f9;
        }
        .item blockquote {
            background-color: skyblue;
        }
        .item h4 {
            background-color: #333;
            color: #fff;
        }

　　

 <div class="container">
        <section class="item">
            <h4>标题</h4>
            <p>负责人：莫里斯</p>
            <blockquote>人力资源社会保障部、财政部7月10日发布通知：明确从2025年1月1日起，2024年底前已退休人员养老金水平总体上调2%</blockquote>
            <footer>3人参与 6月24日</footer>
        </section>
        <section class="item">
            <h4>标题</h4>
            <p>负责人：查尔莫斯</p>
            <blockquote>测试subgrid</blockquote>
            <footer>2人参与 6月24日</footer>
        </section>
        <section class="item">
            <h4>标题</h4>
            <p>负责人：琼斯</p>
            <blockquote>从“一五”就开始培基固本，到新时代以来持之以恒破局突围，洛阳轴承的产品随神舟飞船遨游太空、伴盾构机掘地潜行，小小轴承转动发展的齿轮</blockquote>
            <footer>3人参与 6月24日</footer>
        </section>
    </div>

效果如下

 

 

DOM新特性之caretPositionFromPoint API

caretPositionFromPoint是浏览器支持不久的一个新特性，可以基于当前的光标位置，返回光标所对应元素的位置信息，在之前，此特性使用的是非标准的document.caretRangeFromPoint()方法实现的

 caretPositionFromPoint()方法和elementsFromPoint()方法的区别在于，前者返回节点及其偏移、尺寸等信息，而后者返回元素.

比方说有一段<p>元素文字描述信息，点击这段描述的某个文字，caretPositionFromPoint()方法可以返回精确的文本节点以及点击位置的字符偏移值，而elementsFromPoint()方法只能返回当前<p>元素。

 

语法：

const range = document.caretPositionFromPoint(x, y, options);
//x, y就是相对于浏览器窗口左上角的坐标值。
//options是一个可选参数，支持一个名为shadowRoots的属性，其值为一个ShadowRoot对象数组。该方法可以返回在shadow DOM中定义的节点的插入符号位置

使用场景：例如制作视频封面的时候，书封标题的文字需要中断，此时，就可以直接点击实现

    <figure>
        <img src="https://www.baidu.com/image/blog/202308/nonce-popover-cover.png">
        <figcaption>我是书名点我断句</figcaption>
    </figure>


<script>
    const figcaption = document.querySelector('figcaption');
    const button = document.querySelector('button');
    // 中断方法
    figcaption.addEventListener('click', function (event) {
        const { clientX, clientY } = event;
        let range;
        let textNode;
        let offset;

        if (document.caretPositionFromPoint) {
            range = document.caretPositionFromPoint(clientX, clientY);
            textNode = range.offsetNode;
            offset = range.offset;
        } else if (document.caretRangeFromPoint) {
            // 使用非标准的老的API代替
            range = document.caretRangeFromPoint(clientX, clientY);
            textNode = range.startContainer;
            offset = range.startOffset;
        } else {
            return;
        }
        
        // 文本节点在当前偏移位置分隔，返回的是后面的节点
        const replacement = textNode.splitText(offset);
        const brNode = document.createTextNode('\n');
        replacement.before(brNode);
    });

    // 点击按钮还原
    button.onclick = function () {
        figcaption.textContent = figcaption.textContent.replace(/\n/g, '');
    };
    </script>

效果如下：