根據不同瀏覽器視窗大小不同css檔案程式碼例項

antzone發表於2017-03-13

在實際應用中,可能需要根據當前瀏覽器視窗的不同來呼叫不同的樣式,下面就是一段能夠實現此功能的程式碼。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function adjustStyle(width){ 
  width = parseInt(width); 
  if(width < 701){ 
    $("#css").attr("href","css/narrow.css"); 
  } 
  else if ((width>= 701) && (width < 900)){ 
    $("#css").attr("href","css/medium.css"); 
  } 
  else{ 
    document.write("css/style.css")
  } 
} 
 
$(function(){ 
  adjustStyle($(this).width()); 
  $(window).resize(function(){ 
    adjustStyle($(this).width()); 
  }); 
});

以上程式碼實現了我們的要求,程式碼非常的簡單,這裡就不多介紹了,可以參閱相關閱讀。

相關閱讀:

1.parseInt()函式可以參閱js parseInt()一章節。

2.attr()函式可以參閱jQuery attr()一章節。 

3.resize事件可以參閱jQuery resize事件一章節。

相關文章