我正在尝试取回所有有效的“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,并计算了一个值来确定其他单位的比率--这是一个方便的想法,但我并不完全赞同。而且肯定是一个需要补充逻辑来处理我希望接受的一切的程序)。
提前感谢您的任何见解或建议。
5条答案
按热度按时间sxpgvts31#
EDIT:更新后允许用户选择一个单位返回(例如,以%形式存在,返回px)--当这就足够了时,性能会有很大的提高--可能最终会将其更改为只接受一个单位进行转换,并消除循环。感谢eyelidless的帮助。/EDIT
这是我想到的--经过初步测试,它似乎可以工作。我从最初问题中提到的链接中借用了临时div的思想,但这是从其他类中获得的全部内容。
如果有人有任何意见或改进,我很乐意听听。
蒂亚
cigdeys32#
看看Units,它是一个JavaScript库,可以执行这些转换。
Here's a blog post由描述代码的作者编写。
nwwlzxa73#
我不认为这一定能完全回答问题,因为我没有包括百分比的转换。但是,我认为这是一个很好的开始,可以很容易地根据您的具体用途进行修改。
前面带有加号(
+
)或减号(-
)的任何格式以及以下任何单位都是有效的:一米二米一x、一米三米一x、一米四米一x、一米五米一x、一米六米一x、一米七米一x、一米八米一x、一米九米一x、一米十米一x、一米十一米一x、一米十二米一x、一米十三米一x、一米十四米一x、一米十五米一x、一米十六米一x、一米十七米一x、一米十八米一x例如:
您可以在这里看到格式的完整组合:https://jsfiddle.net/thelevicole/k7yt4naw/1/
noj0wjuj4#
Émile可以做到这一点,特别是在它的
parse
函数中:prop
参数是某个元素的computedStyle,返回的对象有一个v
属性(值)、一个f
方法(只在以后的动画中使用)和一个u
属性(如果需要,值的单位)。这并不能完全回答这个问题,但这可能是一个开始。
dwbf0jvd5#
在深入研究SVG规范时,我发现
SVGLength
为内置单元转换提供了一个有趣的DOM API。用法示例:
有些单位是相对的,因此需要暂时放在父DOM元素中,以便能够解析单位的绝对值。在这些情况下,请为父元素提供第四个参数: