面试题：JavaScript 中如何通过操作 CSS 类来实现简单的布局切换

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

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div class="layout-normal" id="targetDiv">这是需要切换布局的元素</div>
    <button onclick="toggleClass()">切换布局</button>
    <script>
        function toggleClass() {
            var target = document.getElementById('targetDiv');
            if (target.classList) {
                if (target.classList.contains('layout-normal')) {
                    target.classList.remove('layout-normal');
                    target.classList.add('layout-special');
                }
            } else {
                var classes = target.className.split(' ');
                var i = classes.length;
                while (i--) {
                    if (classes[i] === 'layout-normal') {
                        classes.splice(i, 1);
                        classes.push('layout-special');
                        target.className = classes.join(' ');
                        break;
                    }
                }
            }
        }
    </script>
</body>

</html>

星途面试题库

面试题：JavaScript 中如何通过操作 CSS 类来实现简单的布局切换

知识考点

面试题答案