Javascript-js tutorial

Get the image size (no width or height) and enlarge the image: the private properties of IE are used to prevent serious image distortion! If you are interested, refer 1) Get the image size

The Code is as follows:

Script
Function getWH (t ){
// DOM attributes
Console. log ("width =" + t. width); // 200
Console. log ("height =" + t. height); // 300
// Operation Style
Console. log ("styleWidth =" + t. style. width); // null
Console. log ("styleHeight =" + t. style. height); // null
}

2) Get the image size (without setting the width and height)

The Code is as follows:

Script
Function getWH (t ){
// DOM attributes
Console. log ("width =" + t. width); // 200
Console. log ("height =" + t. height); // 300
// Operation Style
Console. log ("styleWidth =" + t. style. width); // null
Console. log ("styleHeight =" + t. style. height); // null
}

As long as we do not explicitly set it in the style, the width and height will always be blank!

3) Enlarge the image:

Here we use the private properties of IE to prevent serious image distortion!

The Code is as follows:

Script
Function getWH (t ){
T. width * = 2;
T. height * = 2;
// Each click, doubling the width and height
}
Script

4) In FF and Google, we can also use naturalWidth and naturalHeight to get the original image size!

The Code is as follows:

Script
Function getWH (t ){
Console. log ("width =" + t. naturalWidth );
Console. log ("height =" + t. naturalHeight );
T. width = t. naturalWidth * 2;
T. height = t. naturalHeight * 2;
}
Script

NaturalWidth and naturalHeight are only read-only attributes. They cannot be used to set the image size or be continuously zoomed in.