Как сохранить переменную JavaScript внутри объекта как свойство

Question

Я пытаюсь динамически получить ширину изображения в DOM, а затем сохранить / перезаписать существующее свойство в ранее объявленном объекте JavaScript.Я могу получить ширину изображения на странице, и кажется, что оно правильно хранится в моем объекте defControls, но ширина моего #showcase остается на уровне 600 пикселей.Любая помощь по этому вопросу будет высоко ценится!

// USER EDITABLE CONTROLS
    var defControls = {
        content : 'img',
        showControls : true,
        prevText : '« Previous', // previous button text
        nextText : 'Next »', // next button text
        containerWidth : 600 // property to be determined by image in the DOM
    };

    // VARIABLE DECLARATIONS
    var controls = {};

    // CHECKS FOR userControls
    if (typeof userControls !== 'undefined') {
        var controls = Object.assign({}, defControls, userControls);
    } else {
        controls = defControls;
    }
    
    var contentType = $(controls.content);
    var $el = $('#showcase');
    var $leftArrow = '#left_arrow';
    var $rightArrow = '#right_arrow';
    var $load = $el.find(contentType)[0];
    
    // PRELOADS CAROUSEL WITH CORRECT SETTINGS
    $el.css('width', controls.containerWidth);
    $load.className = 'active';

    $(window).on('load', function () {
        if (controls.content == 'img') {
            controls.containerWidth = $el.children().width();
            console.log($el.children().width()); // fetches the width of the DOM img
            console.log(controls.containerWidth); // shows the width is being updated but the #showcase div remains at 600px
        }
    })
    
    // ADD CAROUSEL CONTROLS TO PAGE
    if (controls.showControls === true) {
        $('<div id="controls"><a href="#" id="' + $leftArrow.replace('#', '') + '">' + controls.prevText + '</a> <a href="#" id="' + $rightArrow.replace('#', '') + '">' + controls.nextText + '</a></div>').insertAfter('#showcase');
        $('#controls').find('#left_arrow').addClass('disabled');
    }

* {
	margin: 0px;
	padding: 0px;
}

#showcase {
	overflow: hidden;
	background: green;
}

img {
	width: 268px; /* Temporary - image width will be adjusted in the JS */
}

a {
	color: blue;
}

.disabled {
	color: red !important;
}

.slide {
	display: none;
	opacity: 0;
	position: relative;
	left: 0px;
	right: 0px;
}

.active {
	display: inline-block;
	opacity: 1;
	position: relative;
	left: 0px;
	right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showcase">
	<img class="slide" src="https://picsum.photos/458/354/?image=306" />
	<img class="slide" src="https://picsum.photos/458/354/?image=626" />
	<img class="slide" src="https://picsum.photos/458/354/?image=806" />
</div>

Answer 1

но ширина моего #showcase остается на уровне 600px

Да, вы не обновили его снова. Невозможно сделать свойство (или переменную) волшебной ссылкой, поэтому при его обновлении изменяется и ширина витрины.

Просто явно измените CSS после получения ширины:

$(window).on('load', function () {
    if (controls.content == 'img') {
        controls.containerWidth = $el.children().width(); // fetches the width of the DOM img
        console.log(controls.containerWidth); // shows the updated width
        $el.css('width', controls.containerWidth); // updates the #showcase div with the new value
//      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    }
})