元素可视区client系列+立即函数
作者：互联网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: #FFC0CB;
border: #00FFFF 1px solid;
padding: 20px;
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.querySelector('div');
//client翻译过来是客户端，我们使用client系列相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小，元素大小等。
//1.element.clientTop返回元素上边框的大小
console.log(div.clientTop);//1
//2.element.clientLeft返回元素左边框的大小
console.log(div.clientLeft);//1
//3.element.clientWidth返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
console.log(div.clientWidth);//140 20+100+20
//4.element.clientHeight返回自身包括padding、内容区的高度，不含边框，返回数值不带单位
console.log(div.clientHeight);//140 20+100+20
//立即函数(function(){})()
//主要作用：创建一个独立的作用域
//1.立即执行函数：不需要调用，立马能够自己执行的函数
//2.写法：
//(function(){})() 或者 (function(){}()); 自己概括一下哈：就是括号括号 或者 括号里括号
(function(){
console.log(666);
})();//第二个小括号可以看做是调用函数
(function(a){
console.log(a);
var num=10;
})(666);//第二个小括号可以看做是调用函数 括号里可以传实参
(function(a,b){
console.log(a+b);
var num=10;
}(6,6));
//多个立即执行函数之间用分号隔开不然会报错的呦
//立即执行函数最大的作用就是独立创建了一个作用域,里面所有的变量都是局部变量不会有命名冲突
</script>
</body>
</html>
标签：function,console,函数,边框,括号,client,可视区,div,log 来源： https://www.cnblogs.com/xy-fhh/p/15568533.html