JS can't read image width

react js
canjs canjs
donejs
done js
aurelia js
canjs vs react
steel js
can-stache

I'm doing basic exercises for students in JS and one of them requires to change the image size like 50% and back on button click.

I use the following HTML:

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="style.css" rel="stylesheet" type="text/css"/>
        <script src="script.js" type="text/javascript"></script>
    </head>
    <body>
        <div>
            <img id="image" src="krogan.png" alt="krogan">
            <input type="button" value="Change size">
        </div>
    </body>
</html>

with following CSS

button {
    display: block;
}

img {
    display: block;
    width: 256px;
    height: 256px;
}

and when I try to get current image width using this JS code

window.onload=function() {
    alert(document.getElementById('image').style.width);
}

I get an empty message instead of actually set width. What am I doing wrong?

You can use following:-

alert(document.getElementById("image").offsetWidth);

JavaScript Introduction, You will learn more about methods in the next chapters. Creating a JavaScript Object. With JavaScript, you can define and create your own objects. There are� OBD JScan is powerful Jeep & Chrysler & Dodge diagnostic application. JScan allows reading standard Diagnostic Trouble Codes (emission related), general Live Data and Adaptations and much more. Thats not all. JScan can access all modules avalable on your vehicle. ABS, Steering Column, Automatic Transimmsion, Radio, Sway Bar, Havac and many more.

You are accessing the CSS width, these are not set.

What you want is the real width, you can get it from the clientWidth property:

document.getElementById("image").clientWidth;

Same works for clientHeight.

The client width or height are the real sizes that are being displayed by the browser to the user.

JavaScript Objects, Categories: JS API Can I use Browser support tables for modern web technologies. Created & maintained by @Fyrd, design by @Lensco. Support data � In many cases we will request a log from the time when the problem occured. You can send it to us prior to contacting us – this way your problem can likely be solved faster. To send a log enter settings (gear icon in top right corner) -> “send log" and use your email client. The address will be filled automatically.

I would suggest you assign the width using JavaScript and remove it from the CSS file. Then you can manipulate it in JavaScript like this:

document.getElementById('image').css('width') == '256px';

JS API, Categories: JS. Add usage Can I use Browser support tables for modern web technologies. Created & maintained by @Fyrd, design by @Lensco. Support� CanJS’s stache templating language can directly read the state and values from Promises. No need to write any extra code to determine whether a Promise is pending, resolved, or rejected.

JS, Examples. this in function contexts. // An object can be passed as the first argument to call or apply and this will be bound to� JScan, Warszawa. 2,210 likes · 97 talking about this. OBD JScan is an Android and iOS app that was build to help community diagnose and adapt Jeep vehicles especially Jeep JK's.

this, And finally, we can add some JavaScript to implement dynamic behaviour: So in the second example, we can be sure that jquery.js will load� Many Internet Web sites contain JavaScript, a scripting programming language that runs on the web browser to make specific features on the web page functional. If JavaScript has been disabled within your browser, the content or the functionality of the web page can be limited or unavailable.

What is JavaScript?, js), you can execute the script with a command like "node my.js" . The “script” tag. JavaScript programs can be inserted into any part of an HTML� Welcome to jlscan! This website provides jlwarranty processing customers the tools and information needed to administer warranty claims.

Comments
  • there is no style property on that img tag ... - did you want to get the Computed CSS Style width, or the actual natural Image Width?