开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情
创建元素的三种方式
document.write();
elment.innerHTML
document.createElement
区别
1.doument.write 是直接将内容写入页面的内容流,但是文档流执行完毕之后,会导致页面全部重绘
document.write('123');
2.innerHTML 将内容写入某个DOM节点,不会倒是页面全部重绘
3.innerHTML 创建多个元素效率会个更高,结构复杂, 不要拼接字符串, 采用数组形式进行拼接
4.createElement 创建多个元素效率低,但是结构会更清晰
createElement方式(效率一般)
innerHTML数组的方式,(效率会更高)
for(var i=0; i<1000; i++) {
array.push('要添加的html标签内容');
}
document.body.innerHTML = array.join('');
offset与style的区别
offset可以得到任意样式表的样式值获取的值没有单位,只读属性,只能获取不能赋值
想要获取元素大小位置,用offset padding+border+width
style 行内样式表中的样式值 带有单位的字符串可读写属性,可以获取赋值
想要给元素更改至,用style padding+ border
动画函数封装
通过定时器setInterval()不断的移动盒子,可以很方便的给当前对象议案家属性
function animate(obj, target) {
//当点击按钮的时候,这个元素的速度会越来越快,因为开启了太多的定时器
//解决方法: 让元素只有一个定时器执行
//先清除之前的定时器,然后保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function () {
if (obj.offserLeft >= target) {
//停止动画,本质就是停止定时器
obj.style.left = obj.offsetLeft + 10 + 'px'';
}
},200)
}
offset获取元素的位置
client获取元素的大小
scroll获取滚动的距离
要注意: 页面滚动的距离通过window.pageXOffset 获得
页面被卷去的头部兼容性解决方案
需要注意的是,页面被卷去的头部,有兼容性的问题,因此被就去的又不有以下写法
1.声明了DTD, 使用document.document.scrollTop
2.未声明DTD,使用document.body.scrollTop
3.新方法widnwo.pageYOffset和window.pageXOffset,ie9开始支持
