温馨提示×

javascript设置元素宽度的方法

沐橙
928
2021-05-11 18:28:20
栏目: 编程语言

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 {

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>

效果图:

javascript设置元素宽度的方法

说明:

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

语法:

Object.style.width=auto|length|%

参数分析:

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

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

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


0