转换css单位

xpcnnkqh  于 2023-01-22  发布在  其他
关注(0)|答案(5)|浏览(121)

我正在尝试取回所有有效的“length”和“percent”单位的样式属性,从该属性的原始值集转换而来。
例如,如果我有一个div,style.width设置为20%,我希望返回一个对象,其值以百分比(当然,20%)、像素(无论实际像素宽度是多少)、em、pt、ex等表示。
我意识到'percentage'不是一个'length'值,并且不是所有接受length值属性都接受percentage,但是我也想包含它。
当然,有些值将具体取决于元素,可能还取决于它在DOM中的位置(例如,要获得em值,还需要该元素的父元素计算的字体大小)。
我可以假设元素的样式是显式设置的--我知道如何检索元素的当前计算样式--我只是希望不要重复别人可能已经做过的工作。我也知道http://www.galasoft.ch/myjavascript/WebControls/css-length.html,但它依赖于style.pixelWidth或node.clientWidth,并且在Chrome中失败(我假设它在Safari中也失败...可能还有其他版本)。
我已经得到了颜色值(rgb,rgba,hex,name)-这当然是一个更直接的.我正在与数学上可变的值一起工作,所以真的只需要'length'和'percent'值(如果在一个非长度,非百分比值的属性集上调用-如'font-size:较大“-函数可能失败或抛出错误)。
如果按照程序编写,则最好是这样:

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;
}

我并不是要求别人为我写代码,但我希望有人已经做过了,而且它可以在一些开源库、框架、博客文章、tut等等中找到。如果做不到这一点,如果有人有一个聪明的想法,如何简化这个过程,那也很好(上述链接的作者创建了一个临时div,并计算了一个值来确定其他单位的比率--这是一个方便的想法,但我并不完全赞同。而且肯定是一个需要补充逻辑来处理我希望接受的一切的程序)。
提前感谢您的任何见解或建议。

sxpgvts3

sxpgvts31#

EDIT:更新后允许用户选择一个单位返回(例如,以%形式存在,返回px)--当这就足够了时,性能会有很大的提高--可能最终会将其更改为只接受一个单位进行转换,并消除循环。感谢eyelidless的帮助。/EDIT
这是我想到的--经过初步测试,它似乎可以工作。我从最初问题中提到的链接中借用了临时div的思想,但这是从其他类中获得的全部内容。
如果有人有任何意见或改进,我很乐意听听。

(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;

})();

蒂亚

cigdeys3

cigdeys32#

看看Units,它是一个JavaScript库,可以执行这些转换。
Here's a blog post由描述代码的作者编写。

nwwlzxa7

nwwlzxa73#

我不认为这一定能完全回答问题,因为我没有包括百分比的转换。但是,我认为这是一个很好的开始,可以很容易地根据您的具体用途进行修改。

    • Javascript函数**
/**
 * Convert absolute CSS numerical values to pixels.
 *
 * @link https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numbers_lengths_and_percentages
 *
 * @param {string} cssValue
 * @param {null|HTMLElement} target Used for relative units.
 * @return {*}
 */
window.convertCssUnit = function( cssValue, target ) {

    target = target || document.body;

    const supportedUnits = {

        // Absolute sizes
        'px': value => value,
        'cm': value => value * 38,
        'mm': value => value * 3.8,
        'q': value => value * 0.95,
        'in': value => value * 96,
        'pc': value => value * 16,
        'pt': value => value * 1.333333,

        // Relative sizes
        'rem': value => value * parseFloat( getComputedStyle( document.documentElement ).fontSize ),
        'em': value => value * parseFloat( getComputedStyle( target ).fontSize ),
        'vw': value => value / 100 * window.innerWidth,
        'vh': value => value / 100 * window.innerHeight,

        // Times
        'ms': value => value,
        's': value => value * 1000,

        // Angles
        'deg': value => value,
        'rad': value => value * ( 180 / Math.PI ),
        'grad': value => value * ( 180 / 200 ),
        'turn': value => value * 360

    };

    // Match positive and negative numbers including decimals with following unit
    const pattern = new RegExp( `^([\-\+]?(?:\\d+(?:\\.\\d+)?))(${ Object.keys( supportedUnits ).join( '|' ) })$`, 'i' );

    // If is a match, return example: [ "-2.75rem", "-2.75", "rem" ]
    const matches = String.prototype.toString.apply( cssValue ).trim().match( pattern );

    if ( matches ) {
        const value = Number( matches[ 1 ] );
        const unit = matches[ 2 ].toLocaleLowerCase();

        // Sanity check, make sure unit conversion function exists
        if ( unit in supportedUnits ) {
            return supportedUnits[ unit ]( value );
        }
    }

    return cssValue;

};
    • 用法示例**
// Convert rem value to pixels
const remExample = convertCssUnit( '2.5rem' );

// Convert time unit (seconds) to milliseconds
const speedExample = convertCssUnit( '2s' );

// Convert angle unit (grad) to degrees
const emExample = convertCssUnit( '200grad' );

// Convert vw value to pixels
const vwExample = convertCssUnit( '80vw' );

// Convert the css variable to pixels
const varExample = convertCssUnit( getComputedStyle( document.body ).getPropertyValue( '--container-width' ) );

// Convert `em` value relative to page element
const emExample = convertCssUnit( '2em', document.getElementById( '#my-element' ) );
    • 当前支持的格式**

前面带有加号(+)或减号(-)的任何格式以及以下任何单位都是有效的:一米二米一x、一米三米一x、一米四米一x、一米五米一x、一米六米一x、一米七米一x、一米八米一x、一米九米一x、一米十米一x、一米十一米一x、一米十二米一x、一米十三米一x、一米十四米一x、一米十五米一x、一米十六米一x、一米十七米一x、一米十八米一x
例如:

10rem
10.2em
-0.34cm
+10.567s

您可以在这里看到格式的完整组合:https://jsfiddle.net/thelevicole/k7yt4naw/1/

noj0wjuj

noj0wjuj4#

Émile可以做到这一点,特别是在它的parse函数中:

function parse(prop){
    var p = parseFloat(prop), q = prop.replace(/^[\-\d\.]+/,'');
    return isNaN(p) ? { v: q, f: color, u: ''} : { v: p, f: interpolate, u: q };
}

prop参数是某个元素的computedStyle,返回的对象有一个v属性(值)、一个f方法(只在以后的动画中使用)和一个u属性(如果需要,值的单位)。
这并不能完全回答这个问题,但这可能是一个开始。

dwbf0jvd

dwbf0jvd5#

在深入研究SVG规范时,我发现SVGLength为内置单元转换提供了一个有趣的DOM API。

/** Convert a value to a different unit
 * @param {number} val - value to convert
 * @param {string} from - unit `val`; can be one of: %, em, ex, px, cm, mm, in, pt, pc
 * @param {string} to - unit to convert to, same as `from`
 * @returns {object} - {number, string} with the number/string forms for the converted value
 */
const convert_units = (() => {
    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    const len = rect.width.baseVal;
    const modes = {
        "%": len.SVG_LENGTHTYPE_PERCENTAGE,
        "em": len.SVG_LENGTHTYPE_EMS,
        "ex": len.SVG_LENGTHTYPE_EXS,
        "px": len.SVG_LENGTHTYPE_PX,
        "cm": len.SVG_LENGTHTYPE_CM,
        "mm": len.SVG_LENGTHTYPE_MM,
        "in": len.SVG_LENGTHTYPE_IN,
        "pt": len.SVG_LENGTHTYPE_PT,
        "pc": len.SVG_LENGTHTYPE_PC,
    };
    return (val, from, to, context) => {
        if (context)
            context.appendChild(rect);
        len.newValueSpecifiedUnits(modes[from], val);
        len.convertToSpecifiedUnits(modes[to]);
        const out = {
            number: len.valueInSpecifiedUnits,
            string: len.valueAsString
        };
        if (context)
            context.removeChild(rect);
        return out;
    };
})();

用法示例:

convert_units(1, "in", "mm");
// output: {"number": 25.399999618530273, "string": "25.4mm"}

有些单位是相对的,因此需要暂时放在父DOM元素中,以便能够解析单位的绝对值。在这些情况下,请为父元素提供第四个参数:

convert_units(1, "em", "px", document.body);
// output: {"number": 16, "string": "16px"}

相关问题