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 js,css文件进行压缩混淆

web前端练习31----Css,选择器(基本选择器,复合选择器,属性选择器,伪类,伪元素,优先级,雪碧图练习)

web前端练习31----Css,选择器(基本选择器,复合选择器,属性选择器,伪类,伪元素,优先级,雪碧图练习)

web前端练习32----Css,盒子模型,display,visibility,overflow,单位em

web前端练习32----Css,盒子模型,display,visibility,overflow,单位em

web前端开发需要掌握的几个必备技术