獲取jQuery來測量與em而不是px

我不知道我可以怎麼說這個，但讓我給它一個鏡頭。獲取jQuery來測量與em而不是px

我有一個嚴重基於jQuery的網站;這意味着它的大部分內容都是由jQuery設置的，測量結果爲&。

所有這些測量值是px。我需要將它們轉換爲em，或者最好創建一個函數，將它轉換爲我。如果所有的字體大小都是16px（或100％），這將很容易;但是，情況並非如此。我需要它來檢測容器&的字體大小。

我很抱歉，如果這是措辭不當。如果你能理解這個&幫助我，這將是美好的。如果你認爲這是不可能的，請不要回復，任何事情都是可能的，這只是你願意付出多少努力的問題。

來源

2014-02-18 Crystal Miller

我們確實需要看到一些代碼來回答。我認爲有CSS類做的工作和jQuery增加類的HTML，但是，沒有看到代碼，我不知道這是否繼續下去。 –

有太多的代碼可以顯示; ＆沒有，這將無法正常工作。我正在動態創建元素和樣式，並且我正在檢測諸如某個東西的寬度並將其設置爲var並設置另一個元素的位置的度量，例如= var。我希望這可以幫助澄清？ –

是否有任何理由，你必須動態創建類，你不能讓他們在一個CSS文件，只是改變jQuery中的dom元素的類？ –

我想通了。您可以看到代碼here。

  function px_to_em(px_value, container) { 
      //////////////////////////////// 
      // Detect Contianer Font Size // 
      //////////////////////////////// 

      //Prepend a span tag to the container for testing 
      $(container).prepend("<span id='wraping_span_to_test'></span>"); 

      //Set the span to height 1em and then save the pixel height to the container_ft_sz variable 
      container_ft_size = $("#wraping_span_to_test").css({ 
       "font-family": "inherit", 
        "font-size": "inherit", 
        "font-style": "inherit", 
        "font-variant": "inherit", 
        "font-weight": "inherit", 
        "line-height": "inherit", 
        "margin": "0 !important", 
        "padding": "0 !important", 
        "border": "0 !important", 
        "outline": "0 !important", 
        "background-color": "aqua", 
        "height": "1em", 
        "width": " 1em", 
        "display": "block" 
      }).height(); 

      //Remove the testing span 
      $("#wraping_span_to_test").remove(); 

      //Use values to convert to ems 
      var round_to = 1000; 
      return Math.round((px_value/container_ft_size) * round_to)/round_to; 
     }

這應該讓你找到由像素測量與jQuery測量通過調用一個簡單的函數&它們轉換成電磁測量。

來源

2014-02-19 21:16:06

這並不容易。考慮一下，你可以暫時插入寬度爲1em的內容，以px度量寬度，並從那裏計算你需要的em。

來源

2014-02-18 23:16:12 kraftner

由於ems基於字體大小，因此我無法看到該解決方案如何獲得我需要的結果。你可以詳細說明還是舉個例子？ –

獲取jQuery來測量與em而不是px

回答

相關問題