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的宽度（最初为50％）中减去第二个div宽度的一半。

这就是你的意思：

$(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（＆＃39; attr＆＃39;，value）

2）css（{＆＃39; attr＆＃39;：value}）

所以你可以纠正这个宽度：＆＃39;把这个＆＃39;宽度＆＃39;：放进{} 结果如下：

$(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宽度的一半

4 个答案: