1. 元素节点分为文本节点，元素节点等，innerHTML会把某个元素下所有HTML代码重写，而不单单是文本
<Col span={3}>
<Button type="primary" onClick={this.searchForData}>查询</Button>
<span className="fold-arrow-wrap" onClick={this.foldVariableWrap}>
收起
<i className="icon font_family icon-arrow-line-down-defa"></i>
</span>
</Col>
2. 事件对象是自动传入，currentTarget是事件绑定的节点
3. childNodes可以获取元素下所有节点，单独的空格也是一个文本节点；childNodes是一个类数组。nodeValue可以设置节点的值。
foldVariableWrap=(e)=>{
let target=e.currentTarget;
let wrapEle=document.getElementById("select-fold-wrap");
if(target.innerText==="展开"){
target.childNodes[0].nodeValue="收起";
target.childNodes[1].setAttribute("class","icon font_family icon-arrow-line-down-acti");
wrapEle.style.height="auto";
}else{
target.childNodes[0].nodeValue="展开"
target.childNodes[1].setAttribute("class","icon font_family icon-arrow-line-down-defa");
wrapEle.style.height="100px";
}
}
4. 获取元素宽度，style.width只能获取写在元素style属性里面的宽度，而不能获取css样式表设置的宽度；offsetWidth可以，并且可以获取宽度设置为百分比元素的动态实际宽度
image.png
有时间再看一下jQuery关于获取width和height的源码
获取元素CSS值之getComputedStyle方法熟悉https://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/
6. const定义的对象属性是可以被改变的
const是用来定义常量的，而且定义的时候必须初始化，且定义后不可以修改。当保存对象是引用类型的，const定义的变量中保存的仅是对象的指针，这就意味着，const仅保证指针不发生改变，修改对象的属性不会改变对象的指针，所以是被允许的。也就是说const定义的引用类型只要指针不发生改变，其他的不论如何改变都是允许的。
7. Table td 不换行 超出省略号
table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
或者td里面放一个div 设置min-height 超出hidden
8. inline-block设置overflow:hidden会发生什么
-
使父元素意外增高
image.png
如图可见，span设置高度为40px，但是其父元素却高于40px
- 导致相邻元素向下偏移
解决方法
- inline-block元素添加vertical-align: bottom；
- 将inline-block设为block
网友评论