我正在尝试获取所有有效的“长度”和“百分比”单位中设置的样式属性,并转换为原始值。
例如,如果我有一个样式宽度设置为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,hex,name) - 当然这更加直接。我正在处理数学可变的值,因此只需要“长度”和“百分比”值(如果调用设置为非长度,非百分比值的属性(如“font-size:larger”)的属性,则该函数可能会失败或引发错误)。
如果按照过程式编写,类似这样的代码会是理想的:
我并不要求有人为我编写代码,但我的希望是已经有人做过这件事,并且它可以在某些开源库、框架、博客文章、教程等中找到。如果没有的话,如果有人有一个聪明的想法来简化这个过程,那也很好(上面链接的作者创建了一个临时div并计算单个值来确定其他单位的比率——一个方便的想法,但我并不完全赞同,并且肯定需要补充逻辑来处理我希望接受的所有内容)。
提前感谢您的任何见解或建议。
例如,如果我有一个样式宽度设置为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,hex,name) - 当然这更加直接。我正在处理数学可变的值,因此只需要“长度”和“百分比”值(如果调用设置为非长度,非百分比值的属性(如“font-size:larger”)的属性,则该函数可能会失败或引发错误)。
如果按照过程式编写,类似这样的代码会是理想的:
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并计算单个值来确定其他单位的比率——一个方便的想法,但我并不完全赞同,并且肯定需要补充逻辑来处理我希望接受的所有内容)。
提前感谢您的任何见解或建议。