從Javascript設置一個PHP變量，並從<style>

Question

中讀入我想讓我的CSS樣式從Javascript讀取一個變量並相應地設置CSS「top」值。例如：

$topPosition = false; 
?> 
<script language='JavaScript' type='text/javascript'> 
    function windowsHeightPixels() { 
     windowsHeight = $(window).height() 
     if (windowsHeight > 750) { 
      topPosition = false; 
      //set the $topPosition = false; 
     } 
     else { 
      topPosition = true; 
      //set the $topPosition = true;    
     } 
    } 
    windowsHeightPixels(); 
    alert ("Height is " + windowsHeight + " Top Position is " + topPosition); 
</script> 

<style> 
... 
#fixedbutton { 
    position: fixed; 
    <?php if ($topPosition === false) : ?> top: 650px; 
    <?php else : ?> top: 127px;</p> 
    <?php endif; ?> 
    ... 
} 
</style> 

Answer 1

編輯：重構檢查頁面加載時的窗口高度。

這是一個稍微不同的方法，您可能需要考慮。它不需要PHP變量。根據你提供的示例代碼來判斷，我假設你正在使用jQuery。

<script> 
    function windowHeightThreshold() { 
     var heightThreshold = 750; 
     return $(window).height() > heightThreshold; 
    } 
    function checkWindowHeight() { 
     var targetElement = $('#fixedbutton'); 
     if (windowHeightThreshold()) { 
      targetElement.addClass("windowHeightThreshold"); 
     } else { 
      targetElement.removeClass("windowHeightThreshold"); 
     } 
    } 

    $(window).on("resize", function() { 
     checkWindowHeight(); 
    });   
    $(document).ready(function() { 
     checkWindowHeight(); 
    }); 
</script> 

然後，你的CSS：

<style> 
    #fixedbutton { 
     position: fixed; 
     top: 127px; 
    } 
    #fixedbutton.windowHeightThreshold { 
     top: 650px; 
    } 
</style>