当前位置：首页 > 行业动态 > 正文

div伸缩js

admin
行业动态
2025-02-11
9

“

javascript，// 使用纯CSS实现div伸缩效果，无需JavaScript，div {， width: 100%;， transition: width 0.3s;，}，div:hover {， width: 120%;，}，

“

在网页设计中，实现一个可伸缩的div 容器通常需要结合 HTML、CSS 和 JavaScript，下面是一个详细的示例，展示如何创建一个可伸缩的div 容器，并使用 JavaScript 控制其大小变化。

HTML 结构

我们需要一个基本的 HTML 结构来包含我们的div 容器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Div 伸缩示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="resizable-container">
        <p>这是一个可伸缩的 div 容器。</p>
    </div>
    <button id="expand-btn">展开</button>
    <button id="shrink-btn">收缩</button>
    <script src="script.js"></script>
</body>
</html>

CSS 样式

我们为div 容器添加一些基本样式，使其看起来更美观：

div伸缩js

/* styles.css */
#resizable-container {
    width: 300px;
    height: 200px;
    border: 2px solid #000;
    padding: 20px;
    resize: both;
    overflow: auto;
    transition: width 0.3s ease, height 0.3s ease;
}
button {
    margin: 10px;
    padding: 10px 20px;
    font-size: 16px;
}

JavaScript 功能

我们使用 JavaScript 来控制div 容器的伸缩功能：

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('resizable-container');
    const expandBtn = document.getElementById('expand-btn');
    const shrinkBtn = document.getElementById('shrink-btn');
    expandBtn.addEventListener('click', function() {
        // 增加宽度和高度
        let currentWidth = parseInt(window.getComputedStyle(container).width);
        let currentHeight = parseInt(window.getComputedStyle(container).height);
        container.style.width = (currentWidth + 50) + 'px';
        container.style.height = (currentHeight + 50) + 'px';
    });
    shrinkBtn.addEventListener('click', function() {
        // 减少宽度和高度
        let currentWidth = parseInt(window.getComputedStyle(container).width);
        let currentHeight = parseInt(window.getComputedStyle(container).height);
        container.style.width = (currentWidth 50) + 'px';
        container.style.height = (currentHeight 50) + 'px';
    });
});