本文摘自PHP中文网，作者青灯夜游，侵删。
javascript设置元素宽度的方法：首先使用“document.getElementById("id值")”语句获取元素对象；然后使用“元素对象.style.width="宽度值"”语句来设置元素的宽度。
本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。
javascript设置元素宽度
原理：
代码示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!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 属性可以设置元素的宽度。
语法：
1 | Object.style.width=auto|length|%
|
| 值 | 描述 |
|---|
| auto | 默认。浏览器可计算出实际的宽度。 |
| % | 定义基于其包含块的百分比宽度。 |
| length | 使用 px、cm 等单位定义宽度。 |
查找元素的方法：
1.根据id获取元素
1 | document.getElementById("id属性的值");
|
2.根据标签名字获取元素
1 | document.getElementsByTagName("标签的名字");
|
3.根据name属性的值获取元素
1 | document.getElementsByName("name属性的值");
|
4.根据class属性获取元素
1 | document.getElementsByClassName("类样式的名字");
|
5.根据css路径获取元素 （获取一个）
1 | document.querySelector("css路径");
|
6.根据css路径获取元素 （获取一组）
1 | document.querySelectorAll("css路径");
|
【推荐学习：javascript高级教程】
以上就是javascript怎么设置元素宽度的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
javascript json字符串如何转换成对象
深入浅出了解javascript的node中间件原理
如何从javascript到typescript？
js的图片处理与合成详解
javascript怎么将值转为字符串
用js怎么改变css样式
window.open()弹窗被浏览器拦截的解决方法
介绍javascript正则实现表达式以字母开头
javascript关闭后有什么影响
javascript如何删除指定数组元素
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » javascript怎么设置元素宽度
