三大家族对比 易混淆
- offset
- offsetLeft = 最近的有定位的祖先元素的左边距离 如果祖先元素都没有定位就以body为参考点
- offsetTop = 最近的有定位的祖先元素的上边距离 如果祖先元素都没有定位就以body为参考点
- client
- clientLeft = 获取盒子的左边框的宽度
- clientTop = 获取盒子的上边框的宽度
- scroll
- scrollLeft = 内容被卷去的左边距离
- scrollTop = 内容被卷去的上边距离
三大家族属性及用途一览表.png
-
clientHeight offsetHeight ScrollHeight对比
clientHeight offsetHeight ScrollHeight对比.png
-
综合比较. 较为复杂(假设祖先定位元素为body)
三大家族综合比较.jpg
onresize
当屏幕尺寸发生变化时调用
用于做自适应
var obody = document.body;
// 只要窗口尺寸发生改变就会调用
window.onresize = fn;
fn();
function fn() {
// 应用:当屏幕的宽度>=960时,页面的背景颜色为红色;当屏幕的宽度小于960 >=640时,页面的背景颜色为蓝色;当屏幕的宽度<640时,页面的背景颜色为绿色
if (client().width >= 960) {
obody.style.backgroundColor = 'red';
} else if (client().width >= 640) {
obody.style.backgroundColor = 'blue';
} else {
obody.style.backgroundColor = 'green';
}
}
/**
* 获取浏览器可视区域的高度/宽度
*
* @returns {*}
*/
function client() {
if(window.innerWidth || window.innerHeight){
return{
width:window.innerWidth,
height:window.innerHeight
}
}else if(document.compatMode == 'CSS1Compat'){
// 是w3c标准
return{
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
}
}else {
return{
width:document.body.clientWidth,
height:document.body.clientHeight
}
}
}
函数节流
作用 : 提升性能.
用于频繁调用的函数, 降低其执行的频率
eg. 低级函数节流 : 用一次定时器
var timer = null;
window.onresize = function () {
clearTimeout(timer);
timer = setTimeout(function () {
waterFull();
console.log(2);
},200);
console.log(1);
}
微博分享
- 获取选中文字
var selectedText;
if(window.getSelection){
// 标准模式 获取选中的文字
selectedText = window.getSelection().toString();
}else{
// IE 系列
selectedText = document.selection.createRange().text;
- 微博分享的链接
http://v.t.sina.com.cn/share/share.php?searchPic=false&title=' + selectedText + '&url=[http://www.jianshu.com/u/ce8eba0dbfb6'](http://www.jianshu.com/u/ce8eba0dbfb6')
- 打开新窗口- 动态跳转
//window.location.href = url;
/*
* 第一个参数是url
* 第二个参数是窗口的名称 要不要打开新的窗口
* 第三个参数是窗口的描述 窗口的位置,尺寸等
* */
window.open('http://www.jianshu.com/u/ce8eba0dbfb6','newWindow','left=500,top=200,width=800,height=500');
- 一定要清除上次选中
// 清空上一次选中
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
selectedText = '';
webstorm活动模板
webstorm活动模板设置方法截图.png