Вычтите половину ширины сНа с JS

Question

Я новичок с помощью JS и у меня возникают проблемы с простым действием:

Первого div широтны 50%

Я ищу вычесть из его ширины 50% второго div, использующего JS.

Было бы так:

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

Я не знаю точно, если это то, что вы ищете, но я написал это демо в простых javas cript: 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

Это занимает первую и вторую ширины divs, а затем вычитает половину второй ширины divs из ширины первого 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 способами, принять объект или 2 параметра:

1) css ('attr', value)

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

Таким образом, вы можете исправить это «ширина:» и поставить это «ширина»: и положить в {} Результат будет следующим:

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

В случае отказа только один parametter вы можете использовать второй вариант и код будет следующий

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

Так что теперь синтаксис является правильным, и если вы поставите здесь ваш код сниппета я буду в состоянии помочь вам с функциональностью.