JSFiddle - React, Tailwind, and code Playground

by eitanp461

HTML

<img id="myImg" src="https://watirmelon.files.wordpress.com/2015/11/cropped-watirmelon3.png" style="width:500px;height:98px;">

<p>Click the button to return the original width and the "new/styled" width of the image.</p>

<p><strong>Note:</strong> The naturalWidth property is not supported in Internet Explorer 8 and earlier.</p>

<button onclick="getWidth()">Get width</button>
<button onclick="toggleImage()">Toggle image</button>

<p id="demo"></p>
<p id="demo2"></p>

JavaScript

function getWidth() {
    var x = document.getElementById("myImg").naturalWidth;
    document.getElementById("demo").innerHTML = "The original width of the image is: " + x + " pixels";
    
    var y = document.getElementById("myImg").width;
    document.getElementById("demo2").innerHTML = "The 'styled' width of the image is: " + y + " pixels";
}

var isImgDisplayed = true;
function toggleImage() {
		var newStyle = "initial"
    if (isImgDisplayed) {
    	newStyle = "none";
    }
    isImgDisplayed = !isImgDisplayed;
    document.getElementById("myImg").style.display = newStyle;
}