首页 >web前端 >js教程 > 正文

javascript怎么设置元素宽度

原创2021-04-27 17:16:230313

javascript设置元素宽度的方法:首先使用“document.getElementById("id值")”语句获取元素对象;然后使用“元素对象.style.width="宽度值"”语句来设置元素的宽度。

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

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>

效果图:

1.gif

说明:

Style 对象的width 属性可以设置元素的宽度。

语法:

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

查找元素的方法:

1.根据id获取元素

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

2.根据标签名字获取元素

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

3.根据name属性的值获取元素

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

4.根据class属性获取元素

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

5.根据css路径获取元素 (获取一个)

document.querySelector("css路径");

6.根据css路径获取元素 (获取一组)

document.querySelectorAll("css路径");

【推荐学习:javascript高级教程

以上就是javascript怎么设置元素宽度的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:javascript 元素宽度
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    青灯夜游

    今天学习一小步,明天提升一大步

    最近文章
    php数组中怎么增加元素937
    php怎么找出两个数组不同的元素160
    php怎么改变数据类型556
    推荐视频教程
  • JavaScript设计模式完整视频教程JavaScript设计模式完整视频教程
  • JavaScript基础入门及设计模式视频教程JavaScript基础入门及设计模式视频教程
  • JavaScript基本语法及基本语句视频教程JavaScript基本语法及基本语句视频教程
  • JavaScript核心编程视频教程JavaScript核心编程视频教程
  • JavaScript深入视频教程JavaScript深入视频教程
  • 视频教程分类