JavaScript作为前端开发的重要工具之一，可以轻松地实现页面元素的动态效果。其中，变更CSS宽度是常见的操作之一。

// 通过JavaScript获取元素并修改其宽度
var element = document.getElementById('myElement');
element.style.width = '200px';
// 获取多个元素并进行循环处理
var elements = document.querySelectorAll('.myClass');
for(var i = 0; i< elements.length; i++){
elements[i].style.width = '50%';
}

代码中，我们首先通过getElementById方法获取id为"myElement"的元素，然后将其宽度设置为200px。接着，我们使用querySelectorAll方法获取class为"myClass"的所有元素，之后进行循环遍历并将宽度设置为50%。

除了直接设置宽度值，我们也可以使用JavaScript计算宽度值并进行设定。

// 获取元素宽度并计算新宽度
var element = document.querySelector('.myElement');
var width = element.offsetWidth;
var newWidth = (width * 0.5) + 'px';
// 设定新的元素宽度
element.style.width = newWidth;

代码中，我们首先获取class为"myElement"的元素，然后通过offsetWidth属性获取其实际宽度值。接着，我们按照一定比例计算出新的宽度值，并将其设定为元素的新宽度。

通过JavaScript变更CSS宽度，可以为网页带来更加流畅的效果和更好的用户体验。