加油站补充
结构赋值
-
结构对象
基本赋值
const user = {
id: 42,
isVerified: true,
};
const { id, isVerified } = user;
console.log(id); // 42
console.log(isVerified); // true
赋值给新的变量名
const o = { p: 42, q: true };
//o.p o.q
const { p: foo, q: bar } = o;
console.log(foo); // 42
console.log(bar); // true
//举个例子,const { p: foo } = o 从对象 o 中获取名为 p 的属性,并将其赋值给名为 foo 的局部变量
解构嵌套对象和数组
const metadata = {
title: 'Scratchpad',
translations: [
{
locale: 'de',
localization_tags: [],
last_edit: '2014-04-14T08:43:37',
url: '/de/docs/Tools/Scratchpad',
title: 'JavaScript-Umgebung'
}
],
url: '/zh-CN/docs/Tools/Scratchpad'
};
let {
title: englishTitle, // rename
translations: [
{
title: localeTitle, // rename
},
],
} = metadata;
console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"
For of 迭代和解构
const people = [
{
name: 'Mike Smith',
family: {
mother: 'Jane Smith',
father: 'Harry Smith',
sister: 'Samantha Smith',
},
age: 35,
},
{
name: 'Tom Jones',
family: {
mother: 'Norah Jones',
father: 'Richard Jones',
brother: 'Howard Jones',
},
age: 25,
}
];
for (const { name: n, family: { father: f } } of people) {
console.log(`Name: ${n}, Father: ${f}`);
}
// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"
元素大小、滚动
名 | 意 |
---|---|
clientWidth | 整个盒子不包含margin宽度 |
clientHight | 整个盒子不包含margin高度 |
clientTop(只读) | boderTop的高度,不包括顶部外边距或内边距 |
clientLeft(只读) | boderLeft的高度,不包括顶部外边距或内边距 |
offsetWidth | 只读属性,返回一个元素的布局宽度 |
offsetHeight | 只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。 |
offsetLeft | 只读属性,返回当前元素左上角相对于定位父级的左边距离 |
offsetTop | 只读属性,返回当前元素左上角相对于定位父级的上面距离 |
scrollHeight | 整个可滚动区域的高度 |
scrollTop | 可以获取或设置一个元素的内容垂直滚动的像素数。 |
测试事件对象
<div class="box"></div>
<script>
// let a = ['1','2','1','1','1','1']
// let s = [].join(...a)
// console.log(s);
const box = document.querySelector('.box')
console.log(box.offsetHeight)
box.addEventListener('click',(e)=>{
console.log(e);
console.dir(e.target);
})
</script>
css变量和计算
CSS变量是一种自定义属性,也称为CSS自定义属性,可以在CSS中定义一个变量,然后在整个文档中使用它。这些变量以两个破折号开始,例如:–main-color。要在CSS中使用它们,可以使用var()函数,例如:color: var(–main-color);。这里是一个示例:
:root {
--main-color: #06c;
--main-bg-color: #fff;
--main-text-color: #333;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
}
h1 {
color: var(--main-color);
}
CSS计算是一个内置的数学函数,可以在CSS中进行数学计算。它使用加号、减号、乘号和除号来执行基本的数学运算。这里是一个示例:
.container {
width: calc(100% - 20px);
}
CSS :root 选择器是一种伪类选择器,用来匹配文档的根元素。在HTML中,根元素始终是html元素。使用 :root 选择器可以定义一些全局的CSS变量,或者设置一些文档级别的样式。例如:
:root {
--main-color: #06c;
font-size: 16px;
}
这里,我们在 :root 上定义了一个自定义属性 --main-color,并且设置了文档的默认字体大小为16像素。
网格grid布局
CSS grid布局是一种二维的基于网格的布局系统,可以让你用行和列来定义网格区域,并将元素放置在这些区域中。要使用grid布局,你需要给一个容器元素设置 display: grid;
或 display: inline-grid
; ,然后用 grid-template-columns
和 grid-template-rows
来定义网格轨道的大小,用 grid-column-gap
和 grid-row-gap
来定义网格轨道之间的间隙。你还可以用 grid-template-areas
来命名网格区域,并用 grid-area
来指定元素所属的区域。这里是一个示例:
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 200px;
grid-column-gap: 10px;
grid-row-gap: 10px;
grid-template-areas:
"header header header header"
"main main sidebar sidebar";
}
.header {
grid-area: header;
background-color: #06c;
}
.main {
grid-area: main;
background-color: #fff;
}
.sidebar {
grid-area: sidebar;
background-color: #ccc;
}
这将创建一个四列两行的网格布局,其中第一行是一个全宽的 header 区域,第二行是一个占两列的 main 区域和一个占两列的 sidebar 区域