用js减去div宽度的一半答案

【问题标题】：Substract half of div width with js用js减去div宽度的一半
【发布时间】：2017-06-21 23:48:04
【问题描述】：

我是使用 JS 的新手，我在一个简单的操作上遇到了麻烦：

第一个 div 是 50% 宽度

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

会是这样的：

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);
    });

【问题讨论】：

标签： javascript width percentage

【解决方案1】：

得到父元素宽度除以2并减去另一个元素宽度除以2

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

$el.width( newWidth );

【讨论】：

这对我有用！但是是否可以在重新缩放浏览器时使其实时更改？到目前为止，仅在加载页面时设置宽度并保持静态。还是非常感谢！ :)
包裹在$(window).on('resize', function() { /* code here */}).resize()

【解决方案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';
}

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

您有语法错误：

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

1) css('attr', value)

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

所以你可以更正这个 '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);
});

所以现在语法是正确的，如果您将带有 sn-p 的代码放在这里，我将能够在功能方面为您提供帮助。

【讨论】：