使用原生JavaScript改变DOM元素面试题

最新推荐文章于 2024-03-21 06:14:18 发布

ShiyuTim

最新推荐文章于 2024-03-21 06:14:18 发布

阅读量446

点赞数

文章标签：原生JavaScript 前端面试题改变DOM元素

本文链接：https://blog.csdn.net/weixin_44623040/article/details/96366353

版权

今天遇到一个面试题，感觉挺有意思的，就回来研究一下，发现遇到些问题，最后通过百度找出了问题所在，下面请看：
首先是代码骨架:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            color: yellow;
            background-color: #ff0000;
        }
    </style>
</head>
<body>
    <div id="box">
        <p id="text">Hello World</p>
    </div>
    <script>           
    </script>
</body>
</html>

实际图为：
在这里插入图片描述
我复原了一下骨架（但是跟我看到的原题并不一样，原因在下面），然后题目要求是使用原生JavaScript，每2秒改变文字和背景的颜色（就是颜色互换），在5秒后结束。
然后我开始实现，在实现过程中，出现了一点问题，如下代码：

var box = document.getElementById('box');
    
function active () {
    var textColor = box.style.color;
    var textBg = box.style.backgroundColor;
    console.log(textColor);
    console.log(textBg);
}
active();

通过el.style来获取元素的颜色和背景色，然后再控制台打印，发现打印不出来，显示是这样的：
在这里插入图片描述
因为我在当时上机操作的时候，是能够获取到的，然后琢磨了一下，没想明白为什么获取不到，结果百度后发现，通过el.style可以改变元素，但获取元素是获取不到的，这种方式只能通过行内样式才能获取到，也就是这样的<div style="color: yellow"></div>。当时我还嘀咕，这面试题的样式怎么全写成行内的了，这时候我才知道原因。

el.style只能获取元素标签中style里的样式值，无法获取到在<style></style>里定义的样式和通过<link href="style.css">加载进来的样式

但是本着探究的心理，我又百度了一下，发现通过另一个方法可以获取到get.ComputedStyle()[],用法如下：

//获取元素样式
//使用方法 getStyle(元素,"属性名")  如：getStyle(oBox,"background")
//因为版本问题，IE8不支持这个方法，可以使用currentStyle[]来代替

function getStyle(obj, attr) {
     if(window.getComputedStyle) {                //这里进行判断，如果浏览器支持这个方法，则使用。
         return getComputedStyle(obj)[attr];
     }else {									  //如果浏览器不支持上面的方法，那么就使用这个方法
         return obj.currentStyle[attr];
     }
 };

那么，在使用了如上的方法后，就能够获取到元素的颜色和背景色了，在控制台可以打印出来，代码为：

var box = document.getElementById('box');
function active () {
    var textColor = getStyle(box, 'color');
    var textBg = getStyle(box, 'backgroundColor');
    console.log(textColor);
    console.log(textBg);
}
active();

//获取元素样式
function getStyle(obj, attr) {
     if(window.getComputedStyle) {
         return getComputedStyle(obj)[attr];
     }else {
         return obj.currentStyle[attr];
     }
 };

控制台图为：
在这里插入图片描述
图片以RGB的形式打印出来，说明获取成功了。然后就是改变颜色了，代码为：

var box = document.getElementById('box');
//这里执行对元素文字和背景的转换
 function active () {
     var textColor = getStyle(box, 'color');
     var textBg = getStyle(box, 'backgroundColor');
     console.log(textColor);
     console.log(textBg);
     
     box.style.color = textBg;
     box.style.backgroundColor = textColor;
 }
 active();
 //其他代码省略

以上代码只能改变一次，通过使用setInterval定时器来进行循环，代码为：

//其他代码省略

 setInterval(active, 2000);

这样就可以在2秒内进行循环改变了，但是会一直循环改变下去，这时候需要使用clearInterval来清除定时器，代码为：

//把定时器赋值给h
var h = setInterval(active, 2000);

 //在60秒之后执行操作
 setTimeout((function() {
     //清除定时器
     clearInterval(h)
 }), 60000);

以上就是完成的全部步骤了，虽然很简单，但是我还是在清除定时器的时候卡了一下，哎，还需要多加学习啊。

下面贴出全部代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            color: yellow;
            background-color: #ff0000;
        }
    </style>
</head>
<body>
    <div id="box">
        <p id="text">Hello World</p>
    </div>
    <script>    
        var box = document.getElementById('box');
        //这里执行对元素文字和背景的转换
        function active () {
            var textColor = getStyle(box, 'color');
            var textBg = getStyle(box, 'backgroundColor');
            console.log(textColor);
            console.log(textBg);
            
            box.style.color = textBg;
            box.style.backgroundColor = textColor;
        }
        //把定时器赋值给h
        var h = setInterval(active, 2000);
        //在5秒之后执行操作
        setTimeout((function() {
            //清除定时器
            clearInterval(h)
        }), 5000);


        //获取元素样式
        function getStyle(obj, attr) {
            if(window.getComputedStyle) {
                return getComputedStyle(obj)[attr];
            }else {
                return obj.currentStyle[attr];
            }
        };    
    </script>
</body>
</html>

ShiyuTim

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用原生JavaScript改变DOM元素面试题

今天遇到一个面试题，感觉挺有意思的，就回来研究一下，发现遇到些问题，最后通过百度找出了问题所在，下面请看：首先是代码骨架:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> ...
复制链接

扫一扫