文章摘要:javascript设置元素宽度的方法 js设置元素宽度和高度
javascript中设置元素宽度的方法:1、使用“document.getElementById(" […]
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 等单位定义宽度。