用js减去div宽度的一半

Question

我是 JS 的新手，我在执行一个简单的操作时遇到了问题：

第一个 div 是 50% 宽度

我希望使用 JS 从其宽度中减去秒的 50% div。

会像：

a_div width = 50% - ( 50% width of b_div)

我已经试过了，但没用

$(document).ready(function(){
    $("#h-prev").css({'width':($(".swiper-slide-prev").innerWidth())}).css('width:'-$(".swiper-slide-prev").width() * .50);
    });

Answer 1

父元素宽度除以2减去其他元素宽度除以2

var $el = $("#h-prev"),
    parentWidth = $el.parent().width(),
    otherWidth = $(".swiper-slide-prev").width(),
    newWidth =(parentWidth/2) - (otherWidth/2)

$el.width( newWidth );

Answer 2

我不知道这是否正是您要找的，但我已经用简单的语言编写了这个演示 javascript：https://jsfiddle.net/tubL1qxr/2/

var a = document.getElementById('a'), // element a
    b = document.getElementById('b'), // element b
  h = document.getElementById('h'); // button

h.addEventListener('click', changeSize);

function changeSize() {
    a.style.width = ((window.innerWidth / 100 *50) - (b.offsetWidth /100*50)) + 'px';
}

很明显，您必须修改它以适合您的代码。

Answer 3

这需要第一个和第二个 div 的宽度，然后从第一个 div 的宽度中减去第二个 div 的一半宽度（最初是 50% ).

你是这个意思吗:

$(document).ready(function(){
  var secondDivWidth = parseInt($('#second-div').css('width'));
  var firstDivWidth = parseInt($('#first-div').css('width')); 
  $('#first-div').css('width', firstDivWidth - secondDivWidth/2);
  
  // Example purposes only
  console.log("Width before change (50%): " + firstDivWidth);
  console.log("Width after change: " + $('#first-div').css('width'));
   
})

#first-div {
  border: black solid 1px;
  height: 100px;
  width:50%;
}

#second-div {
  border: red solid 1px;
  height: 100px;
  width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first-div">

</div>
<div id="second-div">
    
</div>

Answer 4

您有语法错误：

jQuery css() 函数以两种方式工作，接受对象或 2 个参数：

1) css('attr', 值)

2) css({'attr':值})

因此您可以更正此 'width:' 并输入此 'width': 并输入 {} 结果如下：

$(document).ready(function() {
    $("#h-prev").css({
        'width': ($(".swiper-slide-prev").innerWidth())
    }).css({'width':- $(".swiper-slide-prev").width() * .50});
});

如果只提供一个参数，您可以使用第二个选项，代码如下

    $(document).ready(function() {
    $("#h-prev").css('width', ($(".swiper-slide-prev").innerWidth())).css('width', -$(".swiper-slide-prev").width() * .50);
});

现在语法是正确的，如果您将带有片段的代码放在这里，我将能够帮助您实现功能。

用js减去div宽度的一半

Substract half of div width with js

javascript

width

percentage