Js and auto scaling Image Auto-scaling image multi-browser compatibility method summary original

Recently, I made an image auto-scaling effect and found that the JavaScript code that has been used is abnormal in firefox, resulting in page deformation. so I wrote a general compatibility code for you to discuss.
I used pjblog
Copy codeThe Code is as follows:
// Search for images with a large width in the webpage for scaling and PNG correction
Function ReImgSize (){
For (I = 0; I <document. images. length; I ++)
{
If (document. all ){
If (document. images [I]. width & gt; 550)
{
Document. images [I]. width = "550" // It is not high, which will obviously cause deformation of the image
Try {
Document. images [I]. outerHTML = '<a href = "' + document. images [I]. src + '"target =" _ blank "title =" open an image in a new window ">' + document. images [I]. outerHTML + '</a>'
} Catch (e ){}
}
}
Else {
If (document. images [I]. width> 400 ){
// Neither width nor height makes firefox images larger
Document. images [I]. title = "open an image in a new window"
Document. images [I]. style. cursor = "pointer"
Document. images [I]. onclick = function (e) {window. open (this. src )}
}
}
}
}

The disadvantage of the very good code is that the large image in firefox will be deformed, and the image in the region cannot be controlled. If you want a large image, it will become a small image.
I wrote it myself,
Copy codeThe Code is as follows:
Function $ (objectId ){
If (document. getElementById & document. getElementById (objectId )){
// W3C DOM
Return document. getElementById (objectId );
}
Else if (document. all & document. all (objectId )){
// MSIE 4 DOM
Return document. all (objectId );
}
Else if (document. layers & document. layers [objectId]) {
// NN 4 DOM.. note: this won't find nested layers
Return document. layers [objectId];
}
Else {
Return false;
}
}
Function dxy_ReImgSize (){
Var box = $ ("dxy_content ");
Var imgall = box. getElementsByTagName ("img ")
For (I = 0; I {
If (imgall [I]. width & gt; 500)
{
Var oWidth = imgall [I]. width;
Var oHeight = imgall [I]. height;
Imgall [I]. width = "500 ";
Imgall [I]. height = oHeight * 500/oWidth;
}
}
}

We can also find that if a low browser does not support getElementsByTagName, you will not be able to play. The advantage is that you can control the area.
Finally, there is no way to solve this problem.
Copy codeThe Code is as follows:
Function ReImgSize (){
For (I = 0; I <document. images. length; I ++)
{
If (document. all ){
If (document. images [I]. width & gt; 500)
{
Var oWidth = document. images [I]. width;
Var oHeight = document. images [I]. height;
Document. images [I]. width = "500 ";
Document. images [I]. height = oHeight * 500/oWidth;
Document. images [I]. outerHTML = '<a href = "' + document. images [I]. src + '"target =" _ blank "title =" open an image in a new window ">' + document. images [I]. outerHTML + '</a>'
}
}
Else {
If (document. images [I]. width> 500 ){
Var oWidth = document. images [I]. width;
Var oHeight = document. images [I]. height;
Document. images [I]. width = "500 ";
Document. images [I]. height = oHeight * 500/oWidth;
Document. images [I]. title = "opening an image in a new window ";
Document. images [I]. style. cursor = "pointer"
Document. images [I]. onclick = function (e) {window. open (this. src )}
}
}
}
}

Note that I added
Copy codeThe Code is as follows:
Var oWidth = document. images [I]. width;
Var oHeight = document. images [I]. height;
Document. images [I]. width = "500 ";
Document. images [I]. height = oHeight * 500/oWidth;

If you find any better method, post it.
Www.jb51.net script Home Original, reprinted please indicate the source