Automatically invoke CSS style sheets based on different browsers and resolutions
Source: Internet
Author: User
css| Resolution | browser | style sheet Online A besides really found a lot, but there are no two clones, so put the code on the page on the Web page, but there is no effect is angry with the dead, because of the unfamiliar script, had to ask someone else finally solve the problem!
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> according to the decision browser Type screen resolution automatically call different CSS code </title>
<link href= "" rel= "stylesheet" type= "Text/css"/>
<script language= "JScript" >
if (Window.navigator.userAgent.indexOf ("MSIE") >=1)
{
var ie1024= "Style1.css";
var ie800= "Style2.css";
var ie1152= "Css1.css";
var ieother= "Css1.css";
ScreenWidth (Ie1024,ie800,ie1152,ieother)
}else{
if (Window.navigator.userAgent.indexOf ("Firefox") >=1)
{
If the browser is Firefox
var firefox1024= "Style1";
var firefox800= "Style2.css";
var firefox1152= "Css1.css";
var firefoxother= "Css1.css";
ScreenWidth (Firefox1024,firefox800,firefox1152,firefoxother)
}else{
If the browser is another
var other1024= "Css1.css";
var other800= "Css1.css";
var other1152= "Css1.css";
var otherother= "Css1.css";
ScreenWidth (Other1024,other800,other1152,otherother)
}
}
function ScreenWidth (CSS1,CSS2,CSS3,CSS4) {
if ((screen.width = = 1024) && (screen.height = 768)) {
Setactivestylesheet (CSS1);
}else{
if (Screen.width = && (screen.height = 600)) {
Setactivestylesheet (CSS2);
}else{
if ((Screen.width = = 1152) && (screen.height = 864)) {
Setactivestylesheet (CSS3);
}else{
Setactivestylesheet (CSS4);
}}}
}
function Setactivestylesheet (title) {document.getElementsByTagName ("link") [0].href= "+title;}
</script>
<body>
</body>
Explanation:
var ie1024= "";
var ie800= "";
var ie1152= "";
var ieother= "";
Quotation marks are filled in separately, when the user uses IE and the resolution is 1024*768,800*600,1152*864 to use the CSS filename.
var firefox1024= "";
var firefox800= "";
var firefox1152= "";
var firefoxother= "";
Quotation marks are filled in separately, when the user uses FF and the resolution is 1024*768,800*600,1152*864 to use the CSS filename.
var other1024= "";
var other800= "";
var other1152= "";
var otherother= "";
Quotation marks are filled in separately, when the user uses another browser and the resolution is 1024*768,800*600,1152*864 to use the CSS filename.
Key code:
1.<link href= "" rel= "stylesheet" type= "text/css"/> Note that the connection is empty.
2. document.getElementsByTagName ("link") [0].href= "] +title; where href is the location of the style sheet, this article is in a sibling so it is not written.
3. This article uses only two styles and defines different background colors to show differences.
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.
