web前端练习27----Dom3,js操作css(class,内联样式,getComputedStyle)案例练习（列表刷新加载，二级菜单）
Posted zhaihaohao1
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web前端练习27----Dom3,js操作css(class,内联样式,getComputedStyle)案例练习（列表刷新加载，二级菜单）相关的知识，希望对你有一定的参考价值。
0.修改class(修改类选择器)
操作class就是修改元素对象的 className
语法：元素对象.className = '类选择器名称';
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*
margin: 0px;
padding: 0px;
.box1
width: 100px;
height: 100px;
background-color: blue;
.box2
width: 100px;
height: 100px;
background-color: chartreuse;
</style>
</head>
<body>
<button id="btnChange">点击按钮</button>
<div id="divEle" class="box1"></div>
<script>
let btnChange = document.getElementById('btnChange');
let divEle = document.getElementById('divEle');
btnChange.onclick = function()
// 修改 class 样式
divEle.className = 'box2';
</script>
</body>
</html>结合正则表达式封装一些常用的方法：
元素是否有某个class，元素添加class，元素删除class，切换class
<script>
//定义一个函数，用来向一个元素中添加指定的class属性值
/*
* 判断一个元素中是否含有指定的class属性值
* 如果有该class，则返回true，没有则返回false
*
*/
function hasClass(obj, cn)
//判断obj中有没有cn class
//创建一个正则表达式
//var reg = /\\bb2\\b/;
var reg = new RegExp("\\\\b" + cn + "\\\\b");
return reg.test(obj.className);
/*
* 参数:
* obj 要添加class属性的元素
* cn 要添加的class值
*
*/
function addClass(obj, cn)
//检查obj中是否含有cn
if (!hasClass(obj, cn))
obj.className += " " + cn;
/*
* 删除一个元素中的指定的class属性
*/
function removeClass(obj, cn)
//创建一个正则表达式
var reg = new RegExp("\\\\b" + cn + "\\\\b");
//删除class
obj.className = obj.className.replace(reg, "");
/*
* toggleClass可以用来切换一个类
* 如果元素中具有该类，则删除
* 如果元素中没有该类，则添加
*/
function toggleClass(obj, cn)
//判断obj中是否含有cn
if (hasClass(obj, cn))
//有，则删除
removeClass(obj, cn);
else
//没有，则添加
addClass(obj, cn);
</script> 1.element.style
查找和修改内联样式
由于 element.style 属性的优先级和通过style设置内联样式是一样的，
并且在css层级样式中拥有最高优先级(高于元素选择器，类选择器，id选择器)，
因此在为特定的元素设置样式时很有用。
代码示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 设置内联样式 -->
<div style="width: 100px;height: 100;background-color: yellow;" id="fangkuai"></div>
<script>
let fangkuai = document.getElementById('fangkuai');
fangkuai.onclick = function ()
// 查找内联样式
console.log(fangkuai.style.width);
console.log(fangkuai.style.height);
console.log(fangkuai.style.backgroundColor);
// 修改内联样式
fangkuai.style.width = '50px';
fangkuai.style.height = '50px';
fangkuai.style.backgroundColor = 'red';
</script>
</body>
</html>2.window.getComputedStyle(element, [pseudoElt]);
查找到元素当前生效的属性值，只能查找， 不能修改
参数：第一个传入元素对象，第二个不传
无论是内联样式，id选择器，类选择器，元素选择器，只要生效，就能拿到
代码示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div
border: 1px red solid;
#fangkuai
width: 100px;
.ynagshi
height: 100px;
</style>
</head>
<body>
<div id="fangkuai" class="ynagshi" style="background-color: yellow;"></div>
<script>
let fangkuai = document.getElementById('fangkuai');
fangkuai.onclick = function ()
// 查找 宽，高，背景颜色，边框
let width = window.getComputedStyle(fangkuai).width;
let height = window.getComputedStyle(fangkuai).height;
let backgroundColor = window.getComputedStyle(fangkuai).backgroundColor;
let border = window.getComputedStyle(fangkuai).border;
console.log(width);
console.log(height);
console.log(backgroundColor);
console.log(border);
</script>
</body>
</html>window.getComputedStyle(element, [pseudoElt]); 兼容IE8及以下，封装一个函数：
<body>
<div id="box" style="width: 100px; height: 100px; background-color: brown;">翟浩浩</div>
<script>
let box = document.getElementById('box');
let width = getStyle(box, 'width');
console.log(width);
/*
* 定义一个函数，用来获取指定元素的当前的样式
* 参数：
* obj 要获取样式的元素
* name 要获取的样式名
*
* 这个函数要好好的推敲一下，要知道,这个函数在那一节讲过
* 把相关技术整理整理
*/
function getStyle(obj, name)
if (window.getComputedStyle)
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
else
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
</script>
</body>
3.元素的三个重要高度：
元素总高度（只能查找）
element.scrollHeight
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight
元素可见高度（只能查找）
element.clientHeight
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight
元素滚动高区（顶部隐藏的高度）
element.scrollTop（可查找，可修改）
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop
根据上面的写一个下拉刷新，和上拉加载：
效果图：
开发思路：
1监听滚动事件
element.onscroll = function ()
2判断滑动到顶部时刷新数据
判断到顶部：
element.scrollTop = 0
3判断滑动到底部时加载数据
判断到底部：
scrollHeight = scrollHeight+scrollTop;
参考：
https://blog.csdn.net/zhaihaohao1/article/details/102867995
代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*
margin: 0px;
padding: 0px;
.item
border-bottom: 1px solid red;
line-height: 40px;
text-align: left;
padding-left: 10px;
#list
background-color: violet;
;
overflow-y: auto;
</style>
</head>
<body>
<div id="title" style="line-height: 40px; text-align: center; background-color: springgreen;">测试</div>
<div id="list">
<p id="head" class="item">刷新。。。</p>
<div id="listContent">
</div>
<p id="foot" class="item">加载中。。。</p>
</div>
<script>
// dom相关
// 刷新时的数据
let arrayRefresh = ['zhh1', 'zhh2', 'zhh3', 'zhh4',
'zhh5', 'zhh6', 'zhh7', 'zhh8', 'zhh9', 'zhh10',
'zhh11', 'zhh12', 'zhh13', 'zhh14', 'zhh15', 'zhh16',
'zhh17', 'zhh18', 'zhh19', 'zhh20', 'zhh21', 'zhh22',
'zhh23', 'zhh24', 'zhh25', 'zhh26', 'zhh27', 'zhh28',
'zhh29', 'zhh30'
];
// 加载时的数据
let arrayLoad = [...arrayRefresh];
// 拿到 body 宽高，计算后，设置list的宽高填满
let title = document.getElementById('title');
let list = document.getElementById('list');
// 拿到列表的div
let listContent = document.getElementById('listContent');
let head = document.getElementById('head');
let foot = document.getElementById('foot');
// 隐藏刷新和加载数据的 p 元素
head.style.display = "none";
foot.style.display = "none";
// 设置列表的宽高
setListStyle();
// 渲染数据
drawData(arrayRefresh);
// 设置list的宽高
function setListStyle()
// 注意这个方法拿到的高度有px，要去掉之后才能计算
// 标题高度
let titleHeight = window.getComputedStyle(title).height.replace('px', '');
// body的可见高度
let bodyClientHeight = document.body.clientHeight;
// list的高度
let listHeight = bodyClientHeight - titleHeight;
// 设置列表高度
list.style.height = listHeight;
// 设置列表宽度
list.style.width = document.body.clientWidth;
list.scrollTop = 1;
// 滚动监听
list.onscroll = function ()
// 文档高度
let scrollHeight = list.scrollHeight;
// 可见高度
let clientHeight = list.clientHeight;
let offsetHeight = list.offsetHeight;
// 顶部隐藏高度
let scrollTop = list.scrollTop;
// 滑到了顶部，下拉刷新数据
if (scrollTop == 0)
head.style.display = "block";
console.log('滚动');
listContent.innerHTML = '';
// 渲染数据
drawData(arrayRefresh);
// 重新设置加载的数据
arrayLoad = [];
arrayLoad = [...arrayRefresh];
setTimeout(function ()
// 隐藏头
head.style.display = "none";
// 设置向上隐藏的高度是1，可以继续刷新
list.scrollTop = 1;
, 500);
let chaAbs = Math.abs(scrollHeight - (clientHeight + scrollTop));
//滑到了底部，上拉加载数据
if (chaAbs < 0.5)
console.log(chaAbs);
foot.style.display = "block";
setTimeout(function ()
listContent.innerHTML = '';
arrayLoad.push('新加的数据');
drawData(arrayLoad);
console.log(arrayLoad.length);
, 500);
//监听窗口大小变化
window.onresize = function ()
setListStyle();
//渲染数据，写个函数
function drawData(array)
for (let index = 0; index < array.length; index++)
let p = document.createElement('p');
p.className = 'item';
p.innerText = array[index];
listContent.appendChild(p);
</script>
</body>
</html>4.offsetParent，offsetLeft，offsetTop
offsetParent
可以用来获取当前元素的 定位(position)父元素
如果父元素没有开启position定位,会获取到离当前元素最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位，则返回body
offsetLeft
当前元素相对于其 定位父元素 的水平偏移量
当父元素没有开启 position 定位时，则相对于父元素的父元素，以此类推
当所有父元素都没有开启 position 定位时，则相对于body
offsetTop
当前元素相对于其 定位父元素 的垂直偏移量
当父元素没有开启 position 定位时，则相对于父元素的父元素，以此类推
当父元素都没有开启 position 定位时，则相对于body
测试代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*
padding: 0px;
margin: 0px;
#box3
width: 300px;
height: 300px;
background-color: darkgoldenrod;
margin-left: 100px;
margin-top: 100px;
position: absolute;
#box2
width: 200px;
height: 200px;
background-color: darkgreen;
margin-left: 50px;
margin-top: 50px;
#box1
width: 100px;
height: 100px;
background-color: darkorange;
margin-left: 50px;
margin-top: 50px;
</style>
</head>
<body id='body'>
<div id="box3">
<div id="box2">
<div id="box1"></div>
</div>
</div>
<script>
let box1 = document.getElementById('box1');
/*
* offsetParent
* - 可以用来获取当前元素的 定位(position)父元素
* - 如果父元素没有开启position定位,会获取到离当前元素最近的开启了定位的祖先元素
* - 如果所有的祖先元素都没有开启定位，则返回body
*/
console.log(box1.offsetParent.id);
/*
* offsetLeft
* - 当前元素相对于其 定位父元素 的水平偏移量
- 当父元素没有开启 position 定位时，则相对于父元素的父元素，以此类推
* - 当所有父元素都没有开启 position 定位时，则相对于body
* offsetTop
* - 当前元素相对于其 定位父元素 的垂直偏移量
* - 当父元素没有开启 position 定位时，则相对于父元素的父元素，以此类推
* - 当父元素都没有开启 position 定位时，则相对于body
*/
console.log(box1.offsetLeft);
console.log(box1.offsetTop);
</script>
</body>
</html>5.例子练习：
二级菜单的练习：
主要知识点
1动画 https://blog.csdn.net/zhaihaohao1/article/details/102593574
2修改元素的class
效果图：
主要代码：
工具类：tools.js
//尝试创建一个可以执行简单动画的函数
/*
* 参数：
* obj:要执行动画的对象
* attr:要执行动画的样式，比如：left top width height
* target:执行动画的目标位置
* speed:移动的速度(正数向右移动，负数向左移动)
* callback:回调函数，这个函数将会在动画执行完毕以后执行
*/
function move(obj, attr, target, speed, callback)
//关闭上一个定时器
clearInterval(obj.timer);
//获取元素目前的位置
var current = parseInt(getStyle(obj, attr));
//判断速度的正负值
//如果从0 向 800移动，则speed为正
//如果从800向0移动，则speed为负
if(current > target)
//此时速度应为负值
speed = -speed;
//开启一个定时器，用来执行动画效果
//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
obj.timer = setInterval(function()
//获取box1的原来的left值
var oldValue = parseInt(getStyle(obj, attr));
//在旧值的基础上增加
var newValue = oldValue + speed;
//判断newValue是否大于800
//从800 向 0移动
//向左移动时，需要判断newValue是否小于target
//向右移动时，需要判断newValue是否大于target
if((speed < 0 && newValue < target) || (speed > 0 && newValue > target))
newValue = target;
//将新值设置给box1
obj.style[attr] = newValue + "px";
//当元素移动到0px时，使其停止执行动画
if(newValue == target)
//达到目标，关闭定时器
clearInterval(obj.timer);
//动画执行完毕，调用回调函数
callback && callback();
, 30);
/*
* 定义一个函数，用来获取指定元素的当前的样式
* 参数：
* obj 要获取样式的元素
* name 要获取的样式名
*/
function getStyle(obj, name)
if(window.getComputedStyle)
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
else
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
//定义一个函数，用来向一个元素中添加指定的class属性值
/*
* 参数:
* obj 要添加class属性的元素
* cn 要添加的class值
*
*/
function addClass(obj, cn)
//检查obj中是否含有cn
if(!hasClass(obj, cn))
obj.className += " " + cn;
/*
* 判断一个元素中是否含有指定的class属性值
* 如果有该class，则返回true，没有则返回false
*
*/
function hasClass(obj, cn)
//判断obj中有没有cn class
//创建一个正则表达式
//var reg = /\\bb2\\b/;
var reg = new RegExp("\\\\b" + cn + "\\\\b");
return reg.test(obj.className);
/*
* 删除一个元素中的指定的class属性
*/
function removeClass(obj, cn)
//创建一个正则表达式
var reg = new RegExp("\\\\b" + cn + "\\\\b");
//删除class
obj.className = obj.className.replace(reg, "");
/*
* toggleClass可以用来切换一个类
* 如果元素中具有该类，则删除
* 如果元素中没有该类，则添加
*/
function toggleClass(obj, cn)
//判断obj中是否含有cn
if(hasClass(obj, cn))
//有，则删除
removeClass(obj, cn);
else
//没有，则添加
addClass(obj, cn);
主体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级菜单</title>
<style type="text/css">
*
margin: 0;
padding: 0;
list-style-type: none;
a,
img
border: 0;
text-decoration: none;
body
font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
</style>
<link rel="stylesheet" type="text/css" href="css/sdmenu.css" />
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
window.onload = function()
/*
* 我们的每一个菜单都是一个div
* 当div具有collapsed这个类时，div就是折叠的状态
* 当div没有这个类是，div就是展开的状态
*/
/*
* 点击菜单，切换菜单的显示状态
*/
//获取所有的class为menuSpan的元素
var menuSpan = document.querySelectorAll(".menuSpan");
//定义一个变量，来保存当前打开的菜单
var openDiv = menuSpan[0].parentNode;
//为span绑定单击响应函数
for (var i = 0; i < menuSpan.length; i++)
menuSpan[i].onclick = function()
//this代表我当前点击的span
//获取当前span的父元素
var parentDiv = this.parentNode;
//切换菜单的显示状态
toggleMenu(parentDiv);
//判断openDiv和parentDiv是否相同
if (openDiv != parentDiv && !hasClass(openDiv, "collapsed"))
//打开菜单以后，应该关闭之前打开的菜单
//为了可以统一处理动画过渡效果，我们希望在这将addClass改为toggleClass
//addClass(openDiv , "collapsed");
//此处toggleClass()不需要有移除的功能
//toggleClass(openDiv , "collapsed");
//切换菜单的显示状态
toggleMenu(openDiv);
//修改openDiv为当前打开的菜单
openDiv = parentDiv;
;
/*
* 用来切换菜单折叠和显示状态
*/
function toggleMenu(obj)
//在切换类之前，获取元素的高度
var begin = obj.offsetHeight;
//切换parentDiv的显示
toggleClass(obj, "collapsed");
//在切换类之后获取一个高度
var end = obj.offsetHeight;
//console.log("begin = "+begin +" , end = "+end);
//动画效果就是将高度从begin向end过渡
//将元素的高度重置为begin
obj.style.height = begin + "px";
//执行动画，从bengin向end过渡
move(obj, "height", end, 10, function()
//动画执行完毕，内联样式已经没有存在的意义了，删除之
obj.style.height = "";
);
;
</script>
</head>
<body>
<div id="my_menu" class="sdmenu">
<div>
<span class="menuSpan">在线工具</span>
<a href="#">图像优化</a>
<a href="#">收藏夹图标生成器</a>
<a href="#">邮件</a>
<a href="#">htaccess密码</a>
<a href="#">梯度图像</a>
<a href="#">按钮生成器</a>
</div>
<div class="collapsed">
<span class="menuSpan">支持我们</span>
<a href="#">推荐我们</a>
<a href="#">链接我们</a>
<a href="#">网络资源</a>
</div>
<div class="collapsed">
<span class="menuSpan">合作伙伴</span>
<a href="#">JavaScript工具包</a>
<a href="#">CSS驱动</a>
<a href="#">CodingForums</a>
<a href="#">CSS例子</a>
</div>
<div class="collapsed">
<span class="menuSpan">测试电流</span>
<a href="#">Current or not</a>
<a href="#">Current or not</a>
<a href="#">Current or not</a>
<a href="#">Current or not</a>
</div>
</div>
</body>
</html>有些css文件没有 贴出来，下载完整代码：
https://download.csdn.net/download/zhaihaohao1/12005439
以上是关于web前端练习27----Dom3,js操作css(class,内联样式,getComputedStyle)案例练习（列表刷新加载，二级菜单）的主要内容，如果未能解决你的问题，请参考以下文章
web前端练习31----Css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）
web前端练习31----Css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）
web前端练习32----Css，盒子模型,display,visibility,overflow,单位em