如何獲得級聯樣式值或確定是否計算實際值？

我需要獲取元素（不是計算的）的級聯樣式值，或者確定是否計算實際值。如何獲得級聯樣式值或確定是否計算實際值？

例如，如果我有一個使用css規則width: 100%的元素，我想要得到值100%而不是實際的像素值，或者只是知道實際值已計算出來。

我知道我可以使用elem.currentStyle獲得它，並且我還在Chrome中找到了使用document.defaultView.getMatchedCSSRules()找到它的方法。

有沒有人知道一種方法來獲得它在其他瀏覽器？

來源

2011-06-17 Andy

你有沒有找到答案？ –

-2

最佳途徑是使用一個瀏覽器indepent API庫如jQuery

$(element).css('width') // jquery has a single function that returns a consistent value no matter which browser is in use.

來源

2011-06-17 23:22:41 colinross

我知道jquery。它以像素爲單位返回值 - 它不會返回已設置的相對值。對於寬度爲100％的元素，它不會返回'100％' – Andy

-1

//在這個例子中的CSS參數必須是一個CSS樣式字符串，而不是駝峯字符串。

function deepCss(who, css, ps){ 
    var sty, dv= document.defaultView; 
    // IE8 and below 
    if(document.body.currentStyle){ 
     sty= css.replace(/\-([a-z])/g, function(a, b){ 
      return b.toUpperCase(); 
     }); 
     return who.currentStyle[sty]; 
    } 
    // everyone else 
    if(dv){ 
     dv= document.defaultView.getComputedStyle(who, ps); 
     return dv.getPropertyValue(css); 
    } 
    return ''; 
}

deepCss（document.body的「背景色」）

來源

2011-06-18 00:42:22 kennebec

對於chrome和firefox，它將返回實際分配的值，而不是定義的值，即對於'width：100％'的元素，它將返回實際計算的像素，而不是定義的「100％」值。 – Andy

在這一點上，我不認爲有一個內置的方式做，在IE比其他瀏覽器：getComputedStyle將永遠只是返回這些屬性的使用價值，就像你說的。

來源

2016-09-28 13:37:10 vinntec

你自己計算價值怎麼樣？查詢所需元素的計算寬度和父元素的計算寬度，然後執行一些數學運算以獲得百分比值？ percentageValue = 100% * widthOfWanted/widthOfContainer

來源

2016-10-24 12:28:21

是的，我認爲這是最優雅的解決方案。看看[這裏的答案]（https://teamtreehouse.com/community/pixel-to-percentage-conversion）瞭解有關單位轉換的技術並根據您的需求實施它 –

如何獲得級聯樣式值或確定是否計算實際值？

回答

相關問題