温馨提示×

javascript设置元素宽度的方法

沐橙
974
2021-05-11 18:28:20
栏目: 编程语言
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

javascript中设置元素宽度的方法:1、使用“document.getElementById("id值")”语句获取元素对象;2、使用“元素对象.style.width="宽度值"”语句来设置元素的宽度;需要在HTML中通过script标签添加javascript代码来实现。

javascript设置元素宽度的方法

具体原理分析:

获取元素对象

HTML DOM Style 对象的width 属性设置元素的宽度。

代码示例:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style>

img {

width200px;

}

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

效果图:

javascript设置元素宽度的方法

说明:

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

语法:

Object.style.width=auto|length|%

参数分析:

auto:默认参数,浏览器可计算出实际的宽度。

%:定义基于其包含块的百分比宽度。

length:使用 px、cm 等单位定义宽度。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

推荐阅读:如何使用Java Arrays的parallelSetAll()方法并行设置数组元素

0