【我不熟悉的html】span标签使用innerText获取内容有多余的\n，绝对定位的元素影响innerText的值

我有一棵树

已于 2022-11-08 21:47:49 修改

阅读量508

点赞数

分类专栏：前端工程化文章标签： html 前端 ecmascript css3 javascript

于 2022-11-08 21:45:25 首次发布

本文链接：https://blog.csdn.net/qq_17335549/article/details/127759563

版权

前端工程化专栏收录该内容

52 篇文章 3 订阅

订阅专栏

结论：如果span标签内，含有相对（fixed，absolute）定位的span标签，使用innerText获取内容的时候，会有多余的\n

话不多说，直接看效果

所以使用innerText的时候，要先去除无用的绝对定位的元素！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/bundle.js"></script>
    <style>
        .inline-block {
            display: inline-block;
            color: red;
        }
        .para-wrapper {
            position: relative;
            display: inline-block;
        }
        .absolute-para {
            position: absolute;
            left:0;
            top:0
        }

        .fixed-para {
            position: absolute;
            left:0;
            top:0
        }
    </style>
</head>
<body>
    <div id="example1">例子1: 今天是个好日子<p class="inline-block">段落</p>你在干什么</div>

    <br/>
    <div id="example2">例子2: 今天是个好日子<div class="inline-block">段落
        <p class="inline-block absolute-para">定位absolute定位</p>
    </div>你在干什么</div>

    <br/>
    <div id="example3">例子3: 今天是个好日子<div class="para-wrapper">段落
        <p class="inline-block fixed-para">定位fixed 定位</p>
    </div>你在干什么</div>

    <br/><br/><br/>
    <div id="example4">例子4: 今天是个好日子<div class="para-wrapper">段落
        <span class="inline-block fixed-para">定位fixed span</span>
    </div>你在干什么</div>
    <br/><br/><br/>
    <div id="example5">例子5: 今天是个好日子<div class="para-wrapper">段落
        <span class="inline-block absolute-para">定位absolute span</span>
    </div>你在干什么</div>

    <br/><br/><br/>
    <div id="example6">例子6: 今天是个好日子<div class="para-wrapper">段落
        <span class="inline-block"> span</span>
    </div>你在干什么</div>

    <script>
       console.log(1, document.getElementById('example1').innerText)
       console.log(2, document.getElementById('example2').innerText)
       console.log(3, document.getElementById('example3').innerText)
       console.log(4, document.getElementById('example4').innerText)
       console.log(5, document.getElementById('example5').innerText)
       console.log(6, document.getElementById('example6').innerText)
    </script>

</body>
</html>