1. img不变形
img {
width: 200px;
height: 200px;
object-fit: cover;
}
// background是background-size:cover;
2. 限制input type="file"上传类型为图片
<input type="file" accept="image/*">
// 没有真正的限制,还是可以上传其它类型的文件
3. JS跳转页面传参
// 当前页
var id = 12
var username = '小野友树'
window.sessionStorage.setItem('userId',id)
window.sessionStorage.setItem('username',username)
// 柑橘配合返回上一页href更好使
location.href = 'url'
location.replace('url')
// 目标页接收
var id = window.sessionStorage.getItem('userId')
var username = window.sessionStorage.getItem('username')
// 返回上一页
location.back(-1)
4. 移除HTMLCollection元素
var imgList = document.getElementsByClassName("z_addImg");
// ...
imgList[i].remove()
// 返回的结果并不能用数组的返回删除引发问题
4.1 测试代码
<!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>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div id="test"></div>
</body>
<script>
var getById = document.getElementById('test');
// element
console.log(getById, 'getById', '11111111');
console.log('-------------------------------------------');
var getByCN = document.getElementsByClassName('test');
// HTMLCollection
console.log(getByCN, 'getByCN', '2222222222222');
console.log('-------------------------------------------');
var getByTN = document.getElementsByTagName('div');
// HTMLCollection
console.log(getByTN, 'getByTN', '3333');
console.log('-------------------------------------------');
var qs = document.querySelector('.test');
// element
console.log(qs, 'qs', '4444');
console.log('-------------------------------------------');
var qsa = document.querySelectorAll('.test');
// NodeList
console.log(qsa, 'qsa', '5555');
</script>
</html>
4.2 打印结果
4.3 HTMLCollection和NodeList
DOM文档对象的节点类型分为:文档(整个html)、元素(标签)、文本、属性节点
相同点:
- HTMLCollection对象和NodeList对象类似一个包含 HTML 元素的数组列表,类似伪数组arguments,因此HTMLCollection 和 NodeList 本身无法使用数组的方法:pop()、push() 或 join() 等,除非你把他转为一个数组。
区别:
- HTMLCollection对象 是 HTML 元素的集合,NodeList对象 是 HTML 节点的集合。
- HTMLCollection 元素可以通过 name,id 或 index 索引来获取。NodeList 只能通过 index 索引来获取。
- NodeList 是一个静态集合,其不受 DOM 树元素变化的影响;HTMLCollection 是动态绑定的,是一个的动态集合,DOM 树发生变化,HTMLCollection 也会随之变化,元素节点的增删是敏感的。
4.4 思考
规定query方法返回的元素和元素数组必须是静态的,getElement此类的方法选出的是动态的;
因此,query方法返回的是静态的元素以及NodeList。
使用querySelector返回是静态的,不代表不能进行动态地增加子元素的操作;
获取到的element对象和Nodelist是静态的,操作dom往里面加元素,页面dom改变,但NodeList不改变。
5. iconfont使用步骤
- 官网
- 选择图标,添加入库,添加至项目,下载至本地
- 把下载的文件夹放入项目的assets文件夹中
- 把demo.css的@font-face和iconfont.css的iconfont样式复制进需要使用的页面的css中,其中样式可以按需调整
- 在标签上加上类名并使用icon代码,如
<i class="iconfont"></i>
6. 给html的height设置百分比body的height才是100%
7. select隐藏默认的小箭头,配合iconfont和定位使用
<select id="select" class="type-select" style="outline: none;font-size: 50px;width: 90%; height: 84px;appearance: none;">
// 问题是定位的图片点击没有反应,嘿嘿嘿,配合点击穿透即可解决。
8. 文字的垂直居中
8.1单行文字垂直居中
<div class="text">你好</div>
<style>
.text {
width:100px;
height:100px;
line-height:100px;
}
</style>
8.2 多行文字垂直居中
多行:宽度不够,自动换行的情况
<div class="text">你好你好你好</div>
<style>
.text {
width:20px;
height:100px;
display:table;
vertical-align:middle;
}
</style>
CSS 的属性 vertical-align 用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。
扫描二维码关注公众号,回复:
14839013 查看本文章
9. word-break、white-space的区别
9.1 word-break
CSS 属性 word-break 指定了怎样在单词内断行。
常用:
word-break:break-all;
所有单词碰到边界一律拆分换行,不管你是incomprehensibilities这样一行都显示不下的单词,还是long这样很短的单词,只要碰到边界,都会被强制拆分换行。所以用word-break:break-all时要慎重呀。
9.2 white-space
white-space CSS 属性是用来设置如何处理元素中的空白 。
常用:
white-space:nowrap; 文字不换行,文本会在在同一行上继续,直到遇到
标签为止。