javascript设置元素宽度的方法

lewis 6年前 (2019-04-13) 阅读数 12 #程序编程

文章标签 JavaScript

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

具体原理分析：

获取元素对象

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

代码示例：

<!DOCTYPEhtml><html>
<head>
<metacharset="UTF-8">
<style>
img{
width:200px;
}
</style>
</head>
<body>
<imgid="img"src="img/1.jpg"/>
<pid="demo">img图片宽度为200px。</p>
<buttononclick="myFunction()">设置img图片的宽度</button>
<script>
functionmyFunction(){
document.getElementById("img").style.width="300px";
document.getElementById("demo").innerHTML="img图片宽度为300px。";
}
</script>
</body>
</html>