前端零碎拾遗

汇总下写着写着突然又想起来或者才听说的东西

html

经常忘的标签

<hr/>横线

emmet 语法

TAB 键+标签名快速生成标签
div*4 生成 4 个 div
ul>li 快速生成包含关系
div+p 快速生成兄弟关系
span.nar 快速标签内类名
.aad$*5快速依次生成5个aad类名(无$就生一样的)
div{东西}

css

去下划线

text-decoration: none;

去输入框点击时边框

outline:none;

:root

这个伪类表示 html 标签，而且比他等级更高，是 dom 树里根中之根，可以存点变量啥的

var()函数

可以调用存在父节点里的变量

主义变量命名要以两个横杠–开头

居中更多技巧

1. 定位时用负边距居中

这个需要已知元素大小

比如说定位是left: 50%，元素100px宽那可以设置margin-left: -50px实现居中

2. 定位和 transform 居中

这个不需要元素大小，可以对动态的元素设置

设置父元素position: relative，随后对子元素设置

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

3. 定位和 flex 同时使用，让多元素重叠居中

这个可能不常用，但确实来源于我一个真实需求

比如说这是个天气信息展示，需要在一行内同一个地方展示风力和湿度。看起来就是一行字待 2 秒，然后向上移动渐变消失，同时另一行字从下面渐变向上出现移动到同一位置，如此循环展示。

难点是风力和湿度字数不定，所以就没办法让它固定宽度。而且初始位置是重叠的，并且动画已经占用了transform，上面方案二用不了了，有点难弄

<div class="humidity-wind">
    <div class="humidity">湿度 45%</div>
    <div class="wind">东南风 1级</div>
</div>

我是这么写的 css

.humidity-wind {
    height: 2vh;
    width: 100vw;
    position: relative;
    /* 使风向和湿度居中，我去居然能这么写，医学奇迹啊 */
    display: flex;
    justify-content: center;
}
.humidity-wind > .humidity,
.humidity-wind > .wind {
    position: absolute;
    animation: scroll-up 10s linear infinite;
    white-space: nowrap;
}

.humidity-wind > .wind {
    opacity: 0;
    transform: translateY(100%);
    animation-delay: 5s; /* 风向动画延迟，确保湿度消失后开始 */
}
@keyframes scroll-up {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    5% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(0);
        opacity: 1;
    }
    55% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

重点就是这了

1 2	display: flex; justify-content: center;

这些和position: absolute同时使用。可以尝试一下，如果去掉动画的 transform 的话，是两个 div 重叠居中的。

我以前一直以为设了定位就脱标了，flex 不能影响到，没想到啊，是能同时用的

看 GPT4 解释的是，子元素使用了 position: absolute，那么这个子元素会相对于这个容器进行定位，并且也会继承容器的 align-items 和 justify-content 属性

总之很有意思，记一下

JavaScript

JS 读元素 css 属性

使用 xxx.style 的方法只能读到内联的 css，外联读出来全是空的

可以用getComputedStyle(elem, [pseudo]) 返回一个对象，包含所有 style。比如：

let computedStyle = getComputedStyle(document.body);

console.log(computedStyle.marginTop); // 5px
console.log(computedStyle.color); // rgb(255, 0, 0)

.reduce() 方法

arr.reduce(function(accumulator, item, index, array) { // ...}, [initial]);

accumulator —— 是上一个函数调用的结果，第一次等于 initial（如果提供了 initial 的话）。(相当于一个累加器)

item —— 当前的数组元素。

index —— 当前索引。

arr —— 数组本身。

.replace 方法

str.replace(regexp, replacement)

使用 replacement 替换在字符串 str 中找到的 regexp 的匹配项（如果带有修饰符 g 则替换所有匹配项，否则只替换第一个）

.split 方法

str.split(分隔符)

用以创建一个以分隔符为分割标志的数组

.join 方法

arr.join(插入符)

返回一个字符串，这个字符串是由数组所有元素拼成，中间夹着插入符

如果不写就默认用,间隔，让它没有的话得写空字符串''

Array.prototype.slice.call()

可将类数组(arguments,NodeList)，字符串(String)转换成数组。

为什么用它呢，因为比如 NodeList 缺像是 map 之类的数组方法，转化就能用了

Object.prototype.toString.call(fn) !== ‘[object Function]’

判断 fn 是不是函数

动态的居中问题

比如说有个框，宽度定死了但是高度没定，你预先不知道有多少内容会给高度撑成多少，怎么上下的居中

可以先用定位，给他设置 top:50%，然后 js 给他负的边框，数值是自己的高度一半（当然是用 js 获取可视高度）

xxxx.style.marginTop = '-${xxxx.offsetHeight / 2}px'

展开运算符的覆写

展开操作符...会将一个对象的所有可枚举属性复制到新的对象上。如果在展开操作符之后我们再定义一个与展开对象中同名的属性，那么这个新定义的属性的值将覆盖展开操作符复制过来的同名属性。

比如说

const obj1 = { a: 1, b: 2 };

const obj2 = { ...obj1, b: 3, c: 4 };

console.log(obj2); // 输出 { a: 1, b: 3, c: 4 }

Object.entries() 方法

Object.entries(要处理的对象)

接收一个对象作为参数，并返回一个数组。这个数组的每个元素都是另一个数组，其中包含对象中每个属性的键和值。如果传入的是一个空对象或没有属性的对象，它会返回一个空数组。

例如，假设有一个对象 obj = { a: 1, b: 2 }，那么 Object.entries(obj) 会返回 [['a', 1], ['b', 2]]。