如何将JavaScript变量作为属性存储在对象内部

Question

我试图动态地获取DOM中图像的宽度，然后在先前声明的JavaScript对象中存储/覆盖现有属性。 我能够获取页面上图像的宽度，看来它已正确存储在对象defControls但我的#showcase宽度仍然为600px。 任何帮助，将不胜感激！

 // USER EDITABLE CONTROLS var defControls = { content : 'img', showControls : true, prevText : '&laquo; Previous', // previous button text nextText : 'Next &raquo;', // 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
//      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    }
})