css毛玻璃效果向下穿透以及JS获取单行或者多行文本超出隐藏

本文链接：https://blog.csdn.net/Lidppp/article/details/117258770

css毛玻璃效果向下穿透以及JS获取单行或者多行文本超出隐藏

css毛玻璃(滤镜属性)向下穿透

css的滤镜属性 filter相信大家都很熟悉, 其中值为blur设置的高斯模糊, 在不少设计稿中经常出现, 但是它有一个弊病, 就是只能作用在本元素内.

下面举一个具体的例子

假设我们想要的是一个这样子的header.

说明:

header为窗口定位left:0;top:0;背景色为rgba(226, 48, 48, 0.3);内部文字为header的元素

<style>
  header {
    position: fixed;
    height: 80px;
    width: 50%;
    background: rgba(226, 48, 48, 0.3);
    top: 0;
    left: 0;
  }
</style>
<header>header</header>

用比较熟悉的css属性filter的blur属性来做的话, 效果如下

可以看到, 正好相反了, filter属性将header元素给模糊掉了, 但是后面的元素依然正常显示

解决

一个偶然的机会, 在一片博客上看到了这样的效果(此时那个博客地址已经找不到了,我真的不是故意不写链接的)

backdrop-filter

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

MDN

兼容性有点惨淡…(2021.5.25)

效果

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <style>
        header {
            position: fixed;
            height: 80px;
            width: 50%;
            background: rgba(226, 48, 48, 0.3);
            backdrop-filter: blur(5px); /*主要实现的属性*/
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<!--向下穿透的模糊层-->
<header>header</header>

<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>

</body>
</html>

JS获取单行或者多行文本超出隐藏

做文本超出隐藏的话经常用到css直接给超出文本设置省略号, 然而有时候需要做展开或者收回操作. 如下

这时候, 全部按钮如果没有超出的话是不可以出现的, 但是又不能够很简单得利用文字长度来判断全部按钮能否出现.

解决

首先介绍两个属性, scrollWidth(scrollHeight)和offsetWidth(offsetHeight)

MDN上offsetWidth的解释

HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的（译者注：各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。

MDN上scrollWidth的解释

Element.scrollWidth 这个只读属性是元素内容宽度的一种度量，包括由于overflow溢出而在屏幕上不可见的内容。

scrollWidth值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。宽度的测量方式与clientWidth相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。它还可以包括伪元素的宽度，例如::before或::after。如果元素的内容可以适合而不需要水平滚动条，则其scrollWidth等于clientWidth

简单来说, offsetWidth为元素的真实宽度, scrollWidth为元素在理想情况下(无滚动条,无超出隐藏)会渲染的宽度

假设现在有文档结构如下:

<!--单行文本溢出-->
<h1 id="articleContentId" style="
    width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
">JS判断元素是否出现了省略号，即文本内容的宽度是否超过了元素的宽度</h1>

let box = document.querySelector("#articleContentId")
console.log("scrollWidth: ", box.scrollWidth)
console.log("offsetWidth: ", box.offsetWidth)
if (box.scrollWidth > box.offsetWidth) {
  console.log("出现了省略号")
} else {
  console.log("没有出现省略号")
}

// scrollWidth:  901
// offsetWidth:  500
// 出现了省略号

<!--多行文本溢出-->
<h1 class="title-article" id="articleContentId" style="
    width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
">JS判断元素是否出现了省略号，即文本内容的宽度是否超过了元素的宽度JS判断元素是否出现了省略号，即文本内容的宽度是否超过了元素的宽度JS判断元素是否出现了省略号，即文本内容的宽度是否超过了元素的宽度</h1>

let box = document.querySelector("#articleContentId")
console.log("scrollHeight: ", box.scrollHeight)
console.log("offsetHeight: ", box.offsetHeight)
if (box.scrollHeight > box.offsetHeight) {
  console.log("出现了省略号")
} else {
  console.log("没有出现省略号")
}

// scrollHeight:  270
// offsetHeight:  135
// 出现了省略号