MST

星途 面试题库

面试题：JavaScript动态改变元素Flex布局属性实现响应式布局

在一个网页中有一个父元素，类名为 'parent'，里面有三个子元素，类名分别为 'child1'、'child2'、'child3'。请使用JavaScript根据窗口宽度动态改变它们的Flex布局属性，当窗口宽度大于800px时，三个子元素水平排列且宽度相等；当窗口宽度小于等于800px时，三个子元素垂直排列，且高度自适应。请写出实现该功能的JavaScript代码及相应的HTML和CSS代码框架。
44.7万 热度难度
编程语言JavaScript

知识考点

AI 面试

面试题答案

一键面试

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Flex Layout Responsive</title>
</head>

<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
        <div class="child3"></div>
    </div>
    <script src="script.js"></script>
</body>

</html>

CSS代码

.parent {
    display: flex;
}

.child1,
.child2,
.child3 {
    background-color: lightblue;
    margin: 10px;
}

JavaScript代码

function updateLayout() {
    const parent = document.querySelector('.parent');
    const windowWidth = window.innerWidth;
    if (windowWidth > 800) {
        parent.style.flexDirection = 'row';
        parent.style.justifyContent = 'space-around';
        document.querySelectorAll('.child1, .child2, .child3').forEach((child) => {
            child.style.width = '30%';
            child.style.height = 'auto';
        });
    } else {
        parent.style.flexDirection = 'column';
        document.querySelectorAll('.child1, .child2, .child3').forEach((child) => {
            child.style.width = 'auto';
            child.style.height = 'auto';
        });
    }
}

// 页面加载时调用一次
updateLayout();

// 窗口大小改变时调用
window.addEventListener('resize', updateLayout);