web前端练习27----Dom3,js操作css(class,内联样式,getComputedStyle)案例练习（列表刷新加载，二级菜单）

最新推荐文章于 2021-09-01 12:57:16 发布

zhaihaohao1

最新推荐文章于 2021-09-01 12:57:16 发布

阅读量340

点赞数

分类专栏： web前端2018

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/102983531

版权

web前端2018 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

这篇博客介绍了如何使用JavaScript操作DOM中的CSS，包括修改class、查找和修改内联样式、获取元素的computedStyle、元素高度的计算以及在实际应用场景中的下拉刷新和上拉加载功能。还探讨了offsetParent、offsetLeft和offsetTop属性，并提供了一个二级菜单的动画实践案例。

摘要由CSDN通过智能技术生成

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