事件
<body>
<div>我是div</div>
<script>
let div = document.querySelector('div');
div.onmousedown = function(){
alert(div.innerHTML)
}
/* div 是一个dom对象
.onclick 相当于给对象添加了一个属性
属性值 是一个函数 一点击就会触发 */
// div.onclick = function (){
// alert('你好')
// }
/* onmouseover 鼠标移到某元素之上 */
// div.onmouseover = function(){
// /* '#ccc'十六进制的颜色值 */
// div.style.background = '#ccc'
// }
// /* onmouseout 鼠标从某元素移开 */
// div.onmouseout = function(){
// div.style.background = 'none'
// }
/* onmousedown 鼠标按钮被按下 */
// div.onmousedown = function (){
// alert('鼠标被按下，还没有松开的时候触发')
// }
/* onmousedown 鼠标按钮抬起的时候触发 */
// div.onmouseup = function (){
// alert('鼠标抬起的时候触发')
// }
</script>
</body>
属性
<style>
.div1{
width: 200px;
height: 2000px;
padding: 10px;
margin: 5px;
border: 2px solid #ccc;
/* position: fixed;
left:20px;
top:10px; */
}
.c{
width: 100px;
height: 100px;
background-color: blueviolet;
position: absolute;
top:30px;
left:30px;
}
</style>
<body>
<div class="div1">
<!-- <div class="c"></div> -->
</div>
<button onclick="getScroll()">获取滚动条顶部的距离</button>
<script>
let divDom = document.querySelector('div')
/* width 只是content的宽度 */
// console.log( window.getComputedStyle(divDom,null).width )
/* offsetWidth = content 宽度 + 左右的padding + 左右的border */
// console.log( divDom.offsetWidth );
// console.log( divDom.offsetHeight );
/* clientWidth = content 宽度 + 左右的padding */
// console.log( divDom.clientWidth );
// console.log( divDom.clientHeight );
/* 在正常文档流下 offsetLeft（13） = body的margin-left（8） + divDom的margin-left（5） */
/* 脱离文档流的情况下 offsetLeft（25） = divDom的left（20） + divDom的margin-left（5） */
// console.log(divDom.offsetLeft);
/* 在正常文档流下 offsetTop（8） = body的margin-top（8） */
/* 脱离文档流的情况下 offsetTop（15） = divDom的top（10） + divDom的margin-left（5） */
// console.log(divDom.offsetTop);
/* offsetParent 自己相对于谁（父元素）偏移 */
// console.log( divDom.offsetParent ); => body
// let c = document.getElementsByClassName('c')[0];
/* c是绝对定位 是相对于divDom偏移的 所以他的偏移父元素是divDom */
// console.log( c.offsetParent ); /* =>divDom */
/* offsetParent 如果子元素的父元素是已经定位（relative,absolute,fixed）的元素,
那么他的offsetParent就是已经定位的父元素
如果不是已经定位的元素，那么他的offsetParent就是body
*/
function getScroll(){
/* 获取滚动条距离顶部的高度 */
console.log( document.documentElement.scrollTop );
}
/* 滚动条 滚动事件 */
document.onscroll = function (){
console.log( document.documentElement.scrollTop );
}
</script>
</body>
获取元素样式
<body style="height: 2000px;">
<div class="c f" onclick="fn()" style="border:10px solid #ccc;height: 80px;color:red;background:rebeccapurple">我是div</div>
<script>
let div = document.querySelector('div');
/* 通过style在行内样式上获取样式 */
/* 使用style获取样式 写的什么 就能获取到什么
不会转成rgb 和 出现其他的样式 */
console.log('style',div.style.color )
console.log('style',div.style.background )
/* style是获取不到在内部样式上或者外部样式上的样式的 */
// console.log( div.style.color )
// /* font-size js中要是用驼峰的方式获取 */
// console.log( div.style.fontSize )
/* 使用window.getComputedStyle可以获取行内、内部、外部的所有样式
但是 获得color是rbg格式的，获取的background是所有属性 */
console.log( window.getComputedStyle(div,null).color )
console.log( window.getComputedStyle(div,null).fontSize )
console.log( window.getComputedStyle(div,null).background )
console.log( window.getComputedStyle(div,null).height )
// document.onscroll = function (){
// console.log(document.documentElement.scrollTop);
// }
</script>
</body>
let 和 var 的区别
/* let 和 var 的区别 */
/* let 不能重复声明 */
/* let 具有块级作用域 */
/* {}就代表块级作用域(存在暂时性死区 会把变量存在函数里面) i只会存在于花括号内 */
// for(let i=0;i<3;i++){
// console.log(i);
// }
// console.log(i);
let uls = document.getElementsByClassName('uls');
let cartList = document.getElementById('cartList');
let goods = document.getElementsByClassName('goods');
/* for (let i = 0; i < goods.length; i++) {
goods[i].onmouseover = function () {
goods[i].firstElementChild.nextElementSibling.style.color = 'red';
}
goods[i].onmouseout = function () {
goods[i].firstElementChild.nextElementSibling.style.color = '';
}
goods[i].onmousedown = function () {
alert(goods[i].firstElementChild.nextElementSibling.innerHTML);
}
} */
for(var i=0;i<uls.length;i++){
/* 因为闭包可以把变量存在函数中不会被销毁 */
/* 一个函数里面的变量 被 另一个函数所引用 */
/* 闭包就是函数套函数 */
(function (i){
/* 形式参数i 一直被 里面function 所引用 所以i销毁不掉 */
uls[i].onmouseover = function(){
/* 函数执行过一边之后 变量就自动销毁了 js 垃圾回收机制 */
// console.log(uls[i]); =>undefined
console.log( uls[i] );
uls[i].childNodes[1].nextElementSibling.style.color = 'red';
}
uls[i].onmouseout = function(){
uls[i].childNodes[1].nextElementSibling.style.color = '';
}
uls[i].onmousedown = function(){
alert(uls[i].childNodes[1].nextElementSibling.innerHTML);
}
})(i)
}
