Home > Developer > JavaScript
Objective
Many of the holes in JavaScript, where the compatibility of browsers is also a problem, this article briefly summed up some of the browser compatibility issues of the writing examples, designed to facilitate the search. If the reader has any good suggestions, please message exchange, thank you!
Windows window Size
1. In ie9+, Chrome, Firefox, opera and Safari
Window.innerheight gets the internal height of the browser window
Window.innerwidth gets the internal width of the browser window
var msg = "Window width: + window.innerheight +" \ n Window Height: + window.innerwidth; Alert (msg);
2. In IE5/6/7/8 (also supported by Chrome and Firefox)
Document.documentElement.clientHeight
Document.documentElement.clientWidth
var msg = "Window width: + document.documentElement.clientWidth +" \ n Window Height: + document.documentElement.clientHeight; Alert (msg);
3. Compatible writing (can cover all browsers)
is to "or" the first two.
var w = window.innerwidth | | Document.documentElement.clientWidth; var h = window.innerheight | | Document.documentElement.clientHeight; Alert (Window Width: + w + "\ n Window Height:" + h);
Get an internal style sheet and an external style sheet
1. To IE Browser: object. currentstyle["Property name"
2. Other Browsers: window.getComputedStyle (object, NULL) [property name]
Note: properties in an internal style sheet and properties in an external style sheet can only be obtained without modification. If you want to modify the row style sheet, the row style sheet has the highest precedence, overwriting both the internal style sheet and the external style sheet.
In order to simplify writing and compatible browsers, a method is generally encapsulated. as follows.
<body>
<div id= "Box1" ></div>
<script type= "Text/javascript" >
var box1 = document.getElementById ("Box1");
Alert (box1.currentstyle["width"]); Supports only IE browser
/alert (window.getComputedStyle (box1, null) ["height"]);//Support other Browser
alert (GetStyle (Box1, " BackgroundColor "));
/* In order to simplify writing and compatible browsers, general encapsulation of a method to come out
* *
function GetStyle (obj, attributename) {
if (Obj.currentstyle) { //If there is an object, then return obj.currentstyle[attributename in IE browser
];
} else {//other browser return
window.getcomputedstyle (obj, null) [AttributeName];
}
}
</script>
</body>
Onscroll Events
<script type= "Text/javascript" >
window.onscroll = function () {
console.log ("Start scrolling ...");
Get the scrolling distance across browsers
console.log (Document.documentElement.scrollTop | document.body.scrollTop);
}
</script>
Event Object
Box.onclick = function (event) {
event = Event | | window.event;
Console.log ("OffsetX:" + Event.offsetx + "OffsetY:" + event.offsety);
Console.log ("ScreenX:" + Event.screenx + "ScreenY:" + event.screeny);
Console.log ("ClientX:" + Event.clientx + "ClientY:" + event.clienty);
Console.log ("Pagex:" + Event.pagex + "Pagey:" + event.pagey);
}
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
