使用javascript來改變一個按鈕的href取決於屏幕尺寸

我做了一個基於流動網格的網站，現在我想在iframe中添加電影內容。由於iframe的量變到質變的大小，我所做的內容，我想在這3種尺寸的增加：使用javascript來改變一個按鈕的href取決於屏幕尺寸

-option1尺寸：720P：1280×720
-option2尺寸：480P：854×480
-option3尺寸： 360P：640×360

現在我正在尋找一個腳本來測量用戶的屏幕，然後到按鈕的href更改爲選項1，2或3

這是多遠我來了。我希望有人有一個例子。

<a target="iframe_cinema" onclick="myFunction() href="option1" id="window" class="button2 white"> 
      <img src="images/3D.png"</div></a> 

<script> 
function myFunction() 
{ 

var x=window.innerWidth 
|| document.documentElement.clientWidth 
|| document.body.clientWidth; 


if (Width<640) 
  { 
  x="option1"; 
  } 
else if (Width<854) 
  { 
  x="option2"; 
  } 
else 
  { 
  x="option3"; 
  } 

</script>

在此先感謝。

來源

2013-01-31 Tom Visser

另一種選擇。使用媒體查詢並根據大小顯示/隱藏按鈕。

CSS媒體方式你在做

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 

     @media screen { 
      #div3{ display : block; } 
      #div1, #div2{ display : none; } 
     }   


     @media screen and (max-width:800px) { 
      #div2{ display : block; } 
      #div1, #div3{ display : none; } 
     } 

     @media screen and (max-width:400px) { 
      #div1{ display : block; } 
      #div2, #div3{ display : none; } 
     } 

    </style> 
    </head> 
    <body> 
     <div id="div1">ONE</div> 
     <div id="div2">TWO</div> 
     <div id="div3">THREE</div> 
    </body> 
</html>

JavaScript的方式：

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 
    <a href="#option1" id="myLink">LINKY</a> 
    <script>  
     (function(){  
      var link = document.getElementById("myLink");  
      function checkWidth() { 
       var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, 
        newHref; 
       if (width<640) { 
        newHref="#option1"; 
       } else if (width<854) { 
        newHref="#option2"; 
       } else { 
        newHref="#option3"; 
       } 
       link.href=newHref;  
      } 
      link.onclick = checkWidth; 
      checkWidth(); 
     })();   
    </script> 
    </body> 
</html>

來源

2013-01-31 16:20:30 epascarello

這是最好的選擇。 – techfoobar

Awsome！我使用第二個選項，它的工作原理非常完美。我希望我不要問太多，但可以添加間隔，以便在人們單擊按鈕後繼續檢查寬度，然後更改Treir屏幕大小？非常感謝！ –

綁定到窗口大小調整事件，但需要onclick事件嗎？ – epascarello

使用javascript來改變一個按鈕的href取決於屏幕尺寸

回答

相關問題