您的位置是:网站首页>Javascript编程Javascript编程

javascript怎么设置元素宽度

少儿编程网2022-03-01 15:02:46Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介javascript设置元素宽度的方法:首先使用“document.getElementById(id值)”语句获取元素对象;然后使用“元素对象.style.width=宽度值”语句来设置元素的宽度。本教程操作环境:windows7系统、javascr

javascript设置元素宽度的方法:首先使用“document.getElementById("id值")”语句获取元素对象;然后使用“元素对象.style.width="宽度值"”语句来设置元素的宽度。Etd少儿编程网-https://www.pxcodes.com

Etd少儿编程网-https://www.pxcodes.com

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。Etd少儿编程网-https://www.pxcodes.com

javascript设置元素宽度Etd少儿编程网-https://www.pxcodes.com

原理:Etd少儿编程网-https://www.pxcodes.com

  • 获取元素对象Etd少儿编程网-https://www.pxcodes.com

  • HTML DOM Style 对象的width 属性设置元素的宽度。Etd少儿编程网-https://www.pxcodes.com

代码示例:
Etd少儿编程网-https://www.pxcodes.com

<!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>

效果图:
Etd少儿编程网-https://www.pxcodes.com

Etd少儿编程网-https://www.pxcodes.com

说明:Etd少儿编程网-https://www.pxcodes.com

Style 对象的width 属性可以设置元素的宽度。Etd少儿编程网-https://www.pxcodes.com

语法:Etd少儿编程网-https://www.pxcodes.com

Object.style.width=auto|length|%
描述
auto默认。浏览器可计算出实际的宽度。
%定义基于其包含块的百分比宽度。
length使用 px、cm 等单位定义宽度。

查找元素的方法:Etd少儿编程网-https://www.pxcodes.com

1.根据id获取元素Etd少儿编程网-https://www.pxcodes.com

document.getElementById("id属性的值");

2.根据标签名字获取元素Etd少儿编程网-https://www.pxcodes.com

document.getElementsByTagName("标签的名字");

3.根据name属性的值获取元素Etd少儿编程网-https://www.pxcodes.com

document.getElementsByName("name属性的值");

4.根据class属性获取元素 Etd少儿编程网-https://www.pxcodes.com

document.getElementsByClassName("类样式的名字");

5.根据css路径获取元素 (获取一个)Etd少儿编程网-https://www.pxcodes.com

document.querySelector("css路径");

6.根据css路径获取元素 (获取一组)Etd少儿编程网-https://www.pxcodes.com

document.querySelectorAll("css路径");

【推荐学习:javascript高级教程】

以上就是javascript怎么设置元素宽度的详细内容,更多请关注少儿编程网其它相关文章!Etd少儿编程网-https://www.pxcodes.com

来源:php中文网Etd少儿编程网-https://www.pxcodes.com


相关文章:

支持一下 ( )

javascript怎么设置元素宽度

      匿名评论
    • 评论
    人参与,条评论
    javascript怎么设置元素宽度

微信公众号

免费视频教程

先知道