在JavaScript开发过程中，不少开发者会遇到style.width不起作用的情况，这往往让人感到困惑。下面我们就来深入探讨其原因及相应的代码修改方法。

CSS优先级的问题是导致style.width不起作用的常见原因之一。在CSS中，内联样式、内部样式表和外部样式表都可以设置元素的宽度。如果在其他地方（如外部样式表）对元素的宽度有更具优先级的设置，那么通过JavaScript设置的style.width就可能被覆盖。比如，当外部样式表中使用了!important声明来设置元素宽度时，它的优先级会高于JavaScript动态设置的样式。解决方法是检查CSS代码，确保没有冲突的高优先级样式。或者，在JavaScript中设置宽度时，可以使用更具优先级的方式，例如使用行内样式并带上!important属性，不过这种方法尽量少用，因为会破坏样式的可维护性。

元素的display属性设置不正确也可能导致问题。如果元素的display属性被设置为none，那么它将不会显示，自然设置的宽度也不会生效。另外，像display为inline的元素，宽度由内容决定，设置style.width通常是无效的。对于这种情况，我们需要将display属性设置为合适的值，比如block或inline - block，使宽度设置能够生效。例如：

let element = document.getElementById('myElement');
element.style.display = 'block';
element.style.width = '200px';

JavaScript代码执行的时机也可能影响style.width的效果。如果在文档尚未完全加载完成时就尝试设置元素宽度，可能会因为元素还未完全创建而导致设置无效。我们可以使用DOMContentLoaded事件确保文档加载完成后再执行相关代码。示例如下：

document.addEventListener('DOMContentLoaded', function () {
    let element = document.getElementById('myElement');
    element.style.width = '300px';
});

当遇到JS中style.width不起作用的情况时，要从CSS优先级、display属性设置以及代码执行时机等多方面去排查问题，通过正确的代码修改方法，确保元素宽度能够按照预期设置。