本文摘自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创建元素的方法（代码）
javascript中的arguments对象的用法介绍
javascript怎么删除数组的指定元素
使用proxy实现双向绑定的方法介绍（代码）
详解css和js动画底层原理及如何优化它们的性能
javascript函数内部属性的介绍（附示例）
html里js怎么使用
vue如何实现数字滚动增加效果？代码示例
javascript中的数据类型和类型转换
javascript算法之归并排序算法（详解）
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » javascript怎么设置元素宽度
