一 页面的几种宽高
clientWidth 浏览器的可视宽度，即浏览器的显示宽度
client Height 浏览器的可视高度 ，即浏览器的显示高度
scrollWidth 浏览器的实际宽度，包含滚动条在内的所有宽度
scrollHeight 浏览器的实际高度，包含滚动条在内的所有高度
scrollLeft 浏览器被卷去的宽度，即浏览器的可视宽度，到实际宽度左边的距离
scrollTop浏览器被卷去的高度，即浏览器的可视高度，到是实际宽度顶部的距离
console.log(document.documentElement.clientWidth); console.log(document.documentElement.clientHeight); console.log(document.documentElement.scrollHeight); console.log(document.documentElement.scrollTop); console.log(document.documentElement.scrollLeft); 低版本IE的写法 console.log(document.body.scrollTop); 可同时兼容IE以及其他浏览器 // 短路赋值 var root = document.documentElement || document.body ;
二 浏览器页面匀速返回顶部
// 节流 // 获取元素 // ByClassName 得到的一定是一个数组，即使只有一个值也是数组 var oDivs = document.getElementsByClassName('a') ; // 立一个flag 等于true var flag = true ; // 绑定一个点击事件 oDivs[0].onclick = function () { // 假如flag等于true执行以下代码 if(flag) { // 点击一次后flag等于flas，即点击一次后禁止用户重复点击 flag = false ; // 创建一个定时器，执行次数为10毫秒一次 var t = setInterval(function () { // 每10毫秒浏览器可是页面往上走5像素 document.documentElement.scrollTop -= 5 ; // 滚动条所在的位置不一定能被20整除 // 当浏览器可视区到达浏览器顶部时取消定时器，并且flage又回到true，后面可以继续点击 if(document.documentElement.scrollTop <= 0) { clearInterval(t); flag = true } },10) } }
三 浏览器到达底部提醒
var oP = document.getElementById('p') ; // 这个计算如果写在事件里面每次触发都要不断计算，所以写在外面可以减少计算的时间 --- 优化性能 // 最大的滚动高度 = 页面的实际高度 - 浏览器的可视高度 var maxHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight - 10 ; var t ; // 设置一个滚动条滚动事件 window.onscroll = function () { // 滚动的时候清除定时器，因为滚动触发事件是一个高频触发事件，滚动的同时会触发无数次 // 我们只需要在滚动条停止的时候触发一次就可以了 clearTimeout(t) ; // 设置一个定时器 t = setTimeout(function () { // 当浏览器卷去的高度大于等于浏览器实际高度减去浏览器可视高度时代表浏览器已经到达了底部，提示用户到底了 if(document.documentElement.scrollTop >= maxHeight) { // alert('已经到底了') console.log('到达底部'); oP.style.display = 'block' } },300) }
四 JS获取CSS元素的方法
document.getElementById 通过css标签的ID名获取元素，因为ID名具有唯一性， 一次只能获取一个元素 document.getElementsByClassName 通过CSS标签的class名获取元素，因为class属于js关键字 所以这里的写法为ClassName class名具有重复性，可以一次性获取多个元素 document.getElementsByName 通过name属性来获取元素集合(一般只有表单才有name属性) 也可以一次性获取多个 document.getElementsByTagName() 通过标签名获取元素集合 例如span div 等等，同时会获取 到所有相同标签名的元素 ES6新增的方法 querySelectorAll() 获取所有的元素集合 querySelector() 获取第一个 此方法获取的方式有许多种， 可以是class名 var oDivs = document.querySelectorAll('.a') 可以是id名 var oDivs = document.querySelector('#aa') 可以是标签名 var oDivs = document.querySelectorAll('div') 可以是标签属性的值 var oDivs = document.querySelectorAll('input[name="a"]') 也可以指定同标签的第几个 var oInp = document.querySelector('input:nth-child(2)')
五 js修改CSS标签内容的操作
操作方法有三种 value 输入框的内容，用于修改input标签输入框的内容 innerHTML 标签的内容 可以在内部识别标签 例如 var content = '<span>呵呵<span>'; oDiv.innerHTML = content; innerText 标签的内容 但是不识别标签，在内部写入的标签会以文本的形式显示
六 JS修改和获取CSS的标签属性
获取标签的属性
获取所有的属性 attributes
获取指定的属性值 getAttribute('属性名')
添加或者替换属性 setAttribute('属性名' , '属性值')
删除指定的属性 removeAttribute('属性名')
简写
自有属性可以简写 oDiv.id oDiv.className
自定义属性不能简写
var oDiv = document.querySelector('#a') ; // attribute 属性：包括自有属性和自定义属性 // console.log(oDiv.attributes); // console.log(oDiv.attributes.id); // id='a' // console.log(oDiv.attributes.class); // class='b' // console.log(oDiv.attributes.aa); // aa='a' // 获取具体属性点 方法 console.log(oDiv.getAttribute('id')); // a console.log(oDiv.getAttribute('class')); // b console.log(oDiv.getAttribute('aa')); // a // 添加属性 // setAttribute('属性名' , '属性值') 如果已经存在，就会产生覆盖 oDiv.setAttribute('class' , 'q') // 删除属性 oDiv.removeAttribute('aa') // 自有属性可以直接使用 console.log(oDiv.id); oDiv.id = 'h' console.log(oDiv.className); // class需要替换成className // 自定义属性不能直接使用 // console.log(oDiv.vv);
七 特殊标签的自有属性
表单上的自有属性也可以直接简写 表单禁用的开启与关闭 disabled = true / false 表单多选的选取与关闭 checked = true / false 下拉列表的默认选中 selected = true / false 获取标签 var oInp1 = document.querySelector('.inp1'); var oInp2 = document.querySelector('.inp2'); var oInp3 = document.querySelector('#a'); var oOptions = document.querySelectorAll('option'); 设置一个延时器 setTimeout(function () { oInp1.disabled = false oInp2.checked = false oOptions[1].selected = true },1000)
八 多选表单的全选与反选
// 获取全选框 var oAll = document.querySelector('.all') ; // 同时获取三个单选框 var oOnes = document.querySelectorAll('.one') ; // 绑定全选框的点击事件 oAll.onclick = function () { // 创建一个循环，将三个多选框与全选框绑定，全选框勾选全勾选，全选框关闭全关闭 for(var i = 0 ; i < oOnes.length ; i++) { oOnes[i].checked = oAll.checked ; } } // 遍历三个多选框 for(var i = 0 ; i < oOnes.length ; i++) { // 循环绑定点击事件 oOnes[i].onclick = function () { // 哇一个变量为0 var count = 0 ; // 再次遍历三个多选框 for(var j = 0 ; j < oOnes.length ; j++) { // 识别每个多选框的状态，如果是true 则变量自增，如果是flas 停止循环 if(oOnes[j].checked) { count++ ; } else { break ; } } // 先比较变量的值是否等于多选框的长度（即个数），假如相等，则得出结果true， // 不相等则得出结果flase 再将结果输出给全选框。 oAll.checked = count === oOnes.length } }
九 标签的类名
className 是一个字符串
classList 是一个伪数组，也可以称之为伪对象
.add() 添加类名
.remove() 删除类名
.replace() 替换类名
var oDiv = document.querySelector('.b') ; // 创建一个点击事件 oDiv.onclick = function () { // 判断点击的这个对象的class名中有没有 on 这个类名 if(this.className.includes(' on')) { // 如果有的话就通过classlist删除这个类名 this.classList.remove('on') } else { // 如果没有的话就添加这个类名，用来改变样式 this.classList.add('on') } }
十 标签的样式
jsji 可以获取和控制CSS标签的样式
// 1 获取样式 getComputedStyle(obj)['color'] 如果是行内样式 就可以直接获取 obj.style.color 2 设置样式 obj.style.color = 'red' ; obj.style.cssText = 'color:red;width:100px;' --- 会覆盖之前的行内样式(不想覆盖就+=) cssText 设置样式较为方便，但是是一个字符串，而且会覆盖之前的行内样式，所以不建议使用 链接一个CSS标签 var oDiv = document.querySelector('.a') ; // js动态添加的样式会以行内样式的形式出现 oDiv.style.color = 'red' // css中需要用-链接的样式改为驼峰 oDiv.style.fontSize = '20px' // js简写只能拿到行内样式 console.log(oDiv.style.color); console.log(oDiv.style.height); // 非行内样式无法获取 // cssText给标签添加多个样式,但是会覆盖之前的所有行内样式 oDiv.style.cssText += 'width:100px;height:100px;color:blue;'IE及以下无法使用getComputedStyle，需要使用 currentStyle
可以设置一个函数用于兼容IE8
function css(obj , prop) { if(getComputedStyle) { return getComputedStyle(obj)[prop] } return obj.currentStyle[prop] } 当getComputedStyle代码可以执行时执行执行getComputedStyle 否则就是IE8及一下的浏览器，则执行obj.currentStyle[prop]
十一 js设置点击切换效果
单选 创建 循环绑定事件 for(var i = 0 ; i < oSpans.length ; i++) { oSpans[i].onclick = function () { // 为了显示只有一个可点击的效果，点击的同时先清除掉所有已添加样式的class名 for(var j = 0 ; j < oSpans.length ; j++) { oSpans[j].classList.remove('active') } // 给当前对象添加一个class 改变样式 this.classList.add('active') ; } } 多选 // 多选 // 绑定循环点击事件 for(var i = 0 ; i < oSpans.length ; i++) { // 点击的同时判断这个标签有没有active样式，有的话就删除，没有的话就添加一个 oSpans[i].onclick = function () { if(this.className.includes('active')) { this.classList.remove('active') } else { this.classList.add('active') ; } } }
十一 选项卡
<ul class="comment"> <li data-index="0" class="active">好评</li> <li data-index="1">有图</li> <li data-index="2">差评</li> </ul> <ul class="content"> <li class="show">666666</li> <li>此处有一张大图</li> <li>不希望被骚扰</li> </ul> <script> // 同时获取comment下的所有li var oLis = document.querySelectorAll('.comment li') ; // 同时获取content下的所有li var oLis2 = document.querySelectorAll('.content li') ; // 循环绑定事件 for(var i = 0 ; i < oLis.length ; i++) { oLis[i].onclick = function () { // 清除所有样式表 for(var j = 0 ; j < oLis.length ; j++) { oLis[j].classList.remove('active') } // 给当前对象添加样式表 this.classList.add('active') ; // 隐藏所有的li for(var j = 0 ; j < oLis2.length ; j++) { oLis2[j].classList.remove('show') ; } // 让当前对应的这个li显示 // 声明一个变量 获取自定义class名对应的角标，点击的时候添加样式表 var index = this.getAttribute('data-index') ; console.log(index); oLis2[index].classList.add('show') } }
9525
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
