问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

水平拖动条控制div宽度

头像
solongzz
    7812127
    <style>
    .container{
        width:500px;
    }
    .left{
        width:250px;
    }
    .right{
        width:250px;
    }
</style>
<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

    如何添加一个水平拖动条，通过拖动条来控制内部两个div的宽度，恳请大神指点

    javascript
    阅读 2.8k
    1 个回答
    得票最新
    头像
    JS菌
      6.4k21318
      ✓ 已被采纳

      不知道你要的是不是这种：

      <!DOCTYPE html>

      <html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div.container {
        width: 504px;
        height: 400px;
        border: 1px solid gray;
    }
    
    div.left {
        width: 250px;
        height: 398px;
        border: 1px solid gray;
        float: left;
    }
    
    div.right {
        width: 250px;
        height: 398px;
        border: 1px solid gray;
        float: left;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <input type="range" id="leftBar" value="250" max="250" min="0"></input>
    <input type="range" id="rightBar" value="250" max="250" min="0"></input>

    <script>
        var leftDiv = document.getElementsByTagName("div")[1];
        var rightDiv = document.getElementsByTagName("div")[2];
        var leftBar = document.getElementsByTagName("input")[0];
        var rightBar = document.getElementsByTagName("input")[1];
        rightBar.onmousemove = function() {
            var val = rightBar.value;
            rightDiv.style.width = val + "px";

        };
        leftBar.onmousemove = function() {
            var val = leftBar.value;
            leftDiv.style.width = val + "px";
        };
    </script>
</body>

</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题