how to set width of an element in javascript code example

Example 1: javascript get element width

var width = document.getElementById('myID').offsetWidth;//includes margin,border,padding
var height = document.getElementById('myID'). offsetHeight;//includes margin,border,padding

Example 2: javascript set element width

document.getElementById("myElID").style.width = "100px";

Example 3: get width of a dom element js

// Get Content + Padding + Border
let box = document.querySelector('div');
let width = box.offsetWidth;
let height = box.offsetHeight;

// Get Content + Padding only
let box = document.querySelector('div');
let width = box.clientWidth;
let height = box.clientHeight;

Example 4: change width in js

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Increasing and Decreasing Image Size</title>
<style>
    button{
        padding: 3px 6px;
    }
    button img{
        vertical-align: middle;
    }
</style>
<script>
    function zoomin(){
        var myImg = document.getElementById("sky");
        var currWidth = myImg.clientWidth;
        if(currWidth == 500){
            alert("Maximum zoom-in level reached.");
        } else{
            myImg.style.width = (currWidth + 50) + "px";
        } 
    }
    function zoomout(){
        var myImg = document.getElementById("sky");
        var currWidth = myImg.clientWidth;
        if(currWidth == 50){
            alert("Maximum zoom-out level reached.");
        } else{
            myImg.style.width = (currWidth - 50) + "px";
        }
    }
</script>
</head>
<body>
    <p>
        <button type="button" onclick="zoomin()"><img src="/examples/images/zoom-in.png"> Zoom In</button>
        <button type="button" onclick="zoomout()"><img src="/examples/images/zoom-out.png"> Zoom Out</button>
    </p>
    <img src="/examples/images/sky.jpg" id="sky" width="250" alt="Cloudy Sky">
</body>
</html>

Tags:

Csharp Example

Recent Posts