javascript中设置元素宽度的方法：1、使用“document.getElementById("id值")”语句获取元素对象；2、使用“元素对象.style.width="宽度值"”语句来设置元素的宽度；需要在HTML中通过script标签添加javascript代码来实现。
具体原理分析：
获取元素对象
HTML DOM Style 对象的width 属性设置元素的宽度。
代码示例：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<style>
img {
width: 200px;
}
</style>
</head>
<body>
<img id="img" src="img/1.jpg" />
<p id="demo">img图片宽度为200px。</p>
<button onclick="myFunction()">设置img图片的宽度</button>
<script>
function myFunction() {
document.getElementById("img").style.width="300px";
document.getElementById("demo").innerHTML="img图片宽度为300px。";
}
</script>
</body>
</html>
效果图：
说明：
Style 对象的width 属性可以设置元素的宽度。
语法：
Object.style.width=auto|length|%
参数分析：
auto：默认参数，浏览器可计算出实际的宽度。
%：定义基于其包含块的百分比宽度。
length：使用 px、cm 等单位定义宽度。
辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
推荐阅读： JavaScript trim方法的简单实现
云服务器
物理服务器
虚拟主机
跨境电商服务器