javascript设置元素宽度的方法 js设置元素宽度和高度

主机教程 建站分享 1年前 (2022-12-04) 145次浏览

文章摘要:javascript设置元素宽度的方法 js设置元素宽度和高度

javascript中设置元素宽度的方法:1、使用“document.getElementById(&quot […]

javascript中设置元素宽度的方法:1、使用“document.getElementById("id值")”语句获取元素对象;2、使用“元素对象.style.width="宽度值"”语句来设置元素的宽度;需要在HTML中通过script标签添加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>

效果图:

说明:

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

语法:

Object.style.width=auto|length|%

参数分析:

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

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

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


声明:
若非注明,本站文章源于互联网收集整理和网友分享发布,如有侵权,请联系站长处理。
文章名称:javascript设置元素宽度的方法 js设置元素宽度和高度
文章链接:https://www.7966.org/post/11228.html
转载请注明出处

喜欢 (0)