roc*_*est 13 javascript css jquery
好吧,我已经搜索了jQuery文档(需要有人致力于维护),我搜索了SO,并且我搜索了Google.我找不到这个问题的答案.
在过去,我记得jQuery的工作方式如下:
$('#myObj').width()返回计算出的宽度#myObj.
$('#myObj').css('width')返回输入CSS样式表时的宽度.
现在,无论我使用哪种方法,我使用的任何jQuery包都返回完全相同的数字.
$('#myObj').width()返回计算出的宽度#myObj为整数(float?).
$('#myObj').css('width')返回结束时计算出#myObj的字符串宽度px.
#myobject{
width: 14em;
height: 14em;
}
<div id="myobject">Has Text</div>
<script type="text/javascript">
$( '#myobject' ).click(function(){
alert($(this).css('width') + "\n" + $(this).width());
});
</script>
//Always alerts "224px [newline] 224"
//Expected to alert "14em [newline] 224"
Run Code Online (Sandbox Code Playgroud)
这些基于像素的返回值几乎完全无用,因为我需要根据CSS中的实际内容进行计算.例如,我想对left元素的位置进行数学运算,但我不能因为它不断返回像素值,这在em基于设计的设计中毫无价值.
有没有办法从jQuery中的CSS中获取实际值?
这是一个jQuery错误,还是我错过了什么?
这是一个jsfiddle:http://jsfiddle.net/yAnFL/1/.
显然,这是预期的结果.
我决定使用这个插件为我做转换.
在jQuery设计中,取消对CSS的控制似乎是一个糟糕的选择.
这不是您问题的完整答案,但它可能是计算 em 值的有效解决方案。我从这里改编了这个功能。这是更新的小提琴。
$.fn.emWidth = function(){
var wpx = this.width();
var temp = $('<div />').css({
width:'1em',
position: 'absolute'
});
this.append(temp);
var oneEm = temp.width();
temp.remove();
var value = wpx/oneEm;
return Math.round(value*100)/100;
};
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
3342 次 |
| 最近记录: |