我正在尝试取回所有有效“长度”和“百分比”单位的样式属性，从为该属性设置的原始值转换而来。

例如，如果我有一个 style.width 设置为 20% 的 div，我想要返回一个以百分比(当然是 20%)、像素(无论实际像素宽度是多少)为单位的值的对象，em , pt, ex 等

我意识到“百分比”不是“长度”值，而且并非所有接受长度值的属性都接受百分比，但我也想包括它。

当然，一些值将具体取决于元素，并且可能它在 DOM 中的位置(例如，获取 em 值将需要该元素的父计算字体大小)。

我可以假设样式是为元素明确设置的——我知道如何检索元素的当前计算样式——我只是希望不要重复别人可能已经完成的工作。我也知道 http://www.galasoft.ch/myjavascript/WebControls/css-length.html ，但它依赖于 style.pixelWidth 或 node.clientWidth，并且在 Chrome 中失败(我假设它在 Safari 中也失败了……可能还有其他)。

我已经计算出颜色值(rgb、rgba、十六进制、名称)——这当然要简单得多。我正在处理数学上可变的值，所以实际上只需要“长度”和“百分比”值(如果在具有非长度、非百分比值的属性集上调用——比如“字体大小:更大”——该函数可能会失败，或引发错误)。

如果按程序编写，这样的东西将是理想的:

function getUnits(target, prop){
  var value = // get target's computed style property value
  // figure out what unit is being used natively, and it's values - for this e.g., 100px
  var units = {};
  units.pixel = 100;
  units.percent = 50;  // e.g., if the prop was height and the parent was 200px tall
  units.inch = 1.39;  // presumably units.pixel / 72 would work, but i'm not positive
  units.point = units.inch / 72;
  units.pica = units.point * 12;
  // etc...
  return units;
}

我并不是要找人为我编写代码，但我希望有人以前已经这样做过，并且可以在某些开源库、框架、博客文章、等等中找到它。如果做不到这一点，如果有人有一个聪明的想法如何简化流程，那也很好(上面链接的作者创建了一个临时 div 并计算了一个值来确定其他单位的比率 - 一个方便的想法但是不是我完全相信的，而且肯定是需要补充逻辑来处理我希望接受的所有事情的)。

提前感谢您的任何见解或建议。

最佳答案

编辑:已更新以允许用户选择要返回的单个单位(例如，以 % 形式存在，以 px 返回)- 当足够时性能有很大改进 - 可能最终将其更改为仅接受单个单位转换并摆脱循环。感谢无眼的帮助。/编辑

这就是我的想法 - 经过初步测试，它似乎可以工作。我从原始问题中提到的链接中借用了临时 div 的想法，但这就是从其他类(class)中获取的所有内容。

如果有人有任何意见或改进，我很乐意听到。

   (function(){

    // pass to string.replace for camel to hyphen
    var hyphenate = function(a, b, c){
        return b + "-" + c.toLowerCase();
    }

    // get computed style property
    var getStyle = function(target, prop){
        if(prop in target.style){  // if it's explicitly assigned, just grab that
            if(!!(target.style[prop]) || target.style[prop] === 0){
                return target.style[prop];
            }
        }
        if(window.getComputedStyle){ // gecko and webkit
            prop = prop.replace(/([a-z])([A-Z])/, hyphenate);  // requires hyphenated, not camel
            return window.getComputedStyle(target, null).getPropertyValue(prop);
        }
        if(target.currentStyle){ // ie
            return target.currentStyle[prop];
        }
        return null;
    }

    // get object with units
    var getUnits = function(target, prop, returnUnit){

        var baseline = 100;  // any number serves 
        var item;  // generic iterator

        var map = {  // list of all units and their identifying string
            pixel : "px",
            percent : "%",
            inch : "in",
            cm : "cm",
            mm : "mm",
            point : "pt",
            pica : "pc",
            em : "em",
            ex : "ex"
        };

        var factors = {};  // holds ratios
        var units = {};  // holds calculated values

        var value = getStyle(target, prop);  // get the computed style value

        var numeric = value.match(/\d+/);  // get the numeric component
        if(numeric === null) {  // if match returns null, throw error...  use === so 0 values are accepted
            throw "Invalid property value returned";
        }
        numeric = numeric[0];  // get the string

        var unit = value.match(/\D+$/);  // get the existing unit
        unit = (unit == null) ? "px" : unit[0]; // if its not set, assume px - otherwise grab string

        var activeMap;  // a reference to the map key for the existing unit
        for(item in map){
            if(map[item] == unit){
                activeMap = item;
                break;
            }
        }
        if(!activeMap) { // if existing unit isn't in the map, throw an error
            throw "Unit not found in map";
        }

        var singleUnit = false;  // return object (all units) or string (one unit)?
        if(returnUnit && (typeof returnUnit == "string")) {  // if user wants only one unit returned, delete other maps
            for(item in map){
                if(map[item] == returnUnit){
                    singleUnit = item;
                    continue;
                }
                delete map[item];
            }
        }

        var temp = document.createElement("div");  // create temporary element
        temp.style.overflow = "hidden";  // in case baseline is set too low
        temp.style.visibility = "hidden";  // no need to show it

        target.parentNode.appendChild(temp);    // insert it into the parent for em and ex  

        for(item in map){  // set the style for each unit, then calculate it's relative value against the baseline
            temp.style.width = baseline + map[item];
            factors[item] = baseline / temp.offsetWidth;
        }

        for(item in map){  // use the ratios figured in the above loop to determine converted values
            units[item] = (numeric * (factors[item] * factors[activeMap])) + map[item];
        }

        target.parentNode.removeChild(temp);  // clean up

        if(singleUnit !== false){  // if they just want one unit back
            return units[singleUnit];
        }

        return units;  // returns the object with converted unit values...

    }

    // expose           
    window.getUnits = this.getUnits = getUnits;

})();

我是

关于javascript - 转换 css 单位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4515406/