在jQuery中获取CSS规则的百分比值
Posted
技术标签:
【中文标题】在jQuery中获取CSS规则的百分比值【英文标题】:get CSS rule's percentage value in jQuery 【发布时间】:2010-10-19 03:53:55 【问题描述】:假设规则如下:
.largeField
width: 65%;
有没有办法以某种方式恢复“65%”,而不是像素值?
谢谢。
编辑:不幸的是,在我的情况下使用 DOM 方法是不可靠的,因为我有一个导入其他样式表的样式表,因此 cssRules 参数以null 或 undefined 值。
然而,这种方法适用于大多数简单的情况(一个样式表,文档的 head 标记内有多个单独的样式表声明)。
【问题讨论】:
最好将这些数据植入元素本身,然后跟踪它在未来的变化。 【参考方案1】:最简单的方法
$('.largeField')[0].style.width
// >>> "65%"
【讨论】:
请注意:这仅适用于直接应用于元素的 css(例如style="width:65%"
)。
太棒了!!只返回数字: parseInt($('.largeField')[0].style.width, 10);
Tiago,你可以使用 parseFloat()。
这仅适用于 @brianreavis 所说的内联样式。【参考方案2】:
这绝对是可能的!
你必须先 hide() 父元素。这将阻止 javascript 计算子元素的像素。
$('.parent').hide();
var width = $('.child').width();
$('.parent').show();
alert(width);
见我的example。
现在...我想知道我是不是第一个发现这个 hack:)
更新:
单线
element.clone().appendTo('body').wrap('<div style="display: none"></div>').css('width');
它会在</body>
标签之前留下一个隐藏元素,你可能想要.remove()
。
查看example of one-liner。
我愿意接受更好的想法!
【讨论】:
这应该是公认的解决方案。我还可以确认它对我有用,其他答案没有得到最初分配的百分比值。 为了避免闪烁,克隆孩子,隐藏父母,然后检索宽度。 var clone = $('.child').clone(); 更新:function getCssWidth(childSelector) return jQuery(childSelector).parent().clone().hide().find(childSelector).width(); console.log('child width:' + getCssWidth('.child'));; 很棒的解决方案!这是脚本 jsfiddle.net/Sjeiti/2qkftdjd 的纯 js 等价物 如果 $(...)[0].style.width 答案有效,那么这不应该是公认的解决方案吗?这个解决方案虽然优雅,但确实存在一些性能缺陷。【参考方案3】:恐怕没有内置方法。你可以这样做:
var width = ( 100 * parseFloat($('.largeField').css('width')) / parseFloat($('.largeField').parent().css('width')) ) + '%';
【讨论】:
为了清楚起见,这并不能告诉您样式中的值,它会为您提供计算值 @shevski 工作正常,您必须将class="largeField"
添加到跨度中,目前您正在选择一个空集。
我知道其中有什么问题,这就是为什么它是一个反例。
@shevski 我的示例给出了页面上现有元素的计算值,正如 Anthony 一年前已经指出的那样。你的 cmets 是多余的。
@AdamLassek,安东尼没有说它最存在。【参考方案4】:
您可以访问document.styleSheets
对象:
<style type="text/css">
.largeField
width: 65%;
</style>
<script type="text/javascript">
var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for (var i=0; i < rules.length; i++)
var rule = rules[i];
if (rule.selectorText.toLowerCase() == ".largefield")
alert(rule.style.getPropertyValue("width"));
</script>
【讨论】:
+1 正确使用 DOM 方法(有时 jQuery 不是答案) +1 为了准确起见,我与您同在。我很好奇每个浏览器如何支持这一点,但这是正确的答案。 在更简单的情况下效果很好,包括 FF 和 IE7,但不适用于我(参见上面的编辑)。 您是否也尝试过遍历所有样式表?我的示例只使用了第一个 (styleSheets[0]
)。
对不起,如果这是一个菜鸟问题,但for (var i=0; rules.length; i++)
将如何工作?不应该是for (var i=0; i<rules.length; i++)
【参考方案5】:
晚了,但对于新用户,如果 css 样式包含百分比:
$element.prop('style')['width'];
【讨论】:
就像 css font-size 的魅力一样。 $element.prop('style')['font-size];【参考方案6】:一个基于 Adams 答案的 jQuery 插件:
(function ($)
$.fn.getWidthInPercent = function ()
var width = parseFloat($(this).css('width'))/parseFloat($(this).parent().css('width'));
return Math.round(100*width)+'%';
;
)(jQuery);
$('body').html($('.largeField').getWidthInPercent());
将返回“65%”。如果您喜欢 if (width=='65%'),则仅返回四舍五入的数字以更好地工作。如果您直接使用 Adams 的答案,那是行不通的(我得到了类似 64.93288590604027 的东西)。 :)
【讨论】:
【参考方案7】:基于 timofey 出色且令人惊讶的解决方案,这是一个纯 Javascript 实现:
function cssDimensions(element)
var cn = element.cloneNode();
var div = document.createElement('div');
div.appendChild(cn);
div.style.display = 'none';
document.body.appendChild(div);
var cs = window.getComputedStyle
? getComputedStyle(cn, null)
: cn.currentStyle;
var ret = width: cs.width, height: cs.height ;
document.body.removeChild(div);
return ret;
希望对某人有所帮助。
【讨论】:
语法错误,您在第一行末尾忘记了
。
只有此解决方案在未设置 div 宽度时正确显示“自动”,jquery css('width') 返回 '0px'。所有其他答案都不正确...【参考方案8】:
我在Getting values of global stylesheet in jQuery 有类似的问题,最终我想出了same solution as above。
只是想将这两个问题联系起来,以便其他人可以从以后的发现中受益。
【讨论】:
由于 shesek 对您的问题的评论,您的问题和这个问题已经关联(请参见右侧的“已关联”侧边栏)。【参考方案9】:使用交叉乘法将像素转换为百分比。
公式设置:
1.) (element_width_pixels/parent_width_pixels) = (element_width_percentage / 100)
2.) element_width_percentage = (100 * element_width_pixels) / parent_width_pixels
实际代码:
<script>
var $width_percentage = (100 * $("#child").width()) / $("#parent").width();
</script>
【讨论】:
【参考方案10】:回复较晚,但想为任何 2020 年及以上偶然发现此问题的人补充。可能更适合小众案例,但我想分享几个选项。
如果您知道初始 % 值是什么,您还可以将这些值分配给样式表的 :root 中的变量。即
:root
--large-field-width: 65%;
.largeField
width: var(--large-field-width);
当您想在 JS 中访问此变量时,您只需执行以下操作:
let fieldWidth = getComputedStyle(document.documentElement).getPropertyValue('--large-field-width');
// returns 65% rather than the px value. This is because the % has no relative
// size to the root or rather it's parent.
另一种选择是在脚本开头指定默认样式:
element.style.width = '65%'
然后可以通过以下方式访问它:
let width = element.style.width;
我个人更喜欢第一个选项,但这确实取决于您的用例。这些都是技术上的内联样式,但我喜欢你如何直接使用 JS 更新变量值。
【讨论】:
【参考方案11】:您可以将需要使用 jQuery 访问的样式放在以下任一位置:
-
文档的头部直接
在一个包含中,然后将哪个服务器端脚本放在头部
那么应该可以(虽然不一定容易)写一个js函数来解析文档头部样式标签内的所有内容,并返回你需要的值。
【讨论】:
【参考方案12】:在 jQuery 中没有任何东西,甚至在 javascript 中也没有什么简单明了的东西。接受 timofey 的回答并运行它,我创建了这个函数来获取你想要的任何属性:
// gets the style property as rendered via any means (style sheets, inline, etc) but does *not* compute values
// domNode - the node to get properties for
// properties - Can be a single property to fetch or an array of properties to fetch
function getFinalStyle(domNode, properties)
if(!(properties instanceof Array)) properties = [properties]
var parent = domNode.parentNode
if(parent)
var originalDisplay = parent.style.display
parent.style.display = 'none'
var computedStyles = getComputedStyle(domNode)
var result =
properties.forEach(function(prop)
result[prop] = computedStyles[prop]
)
if(parent)
parent.style.display = originalDisplay
return result
【讨论】:
【参考方案13】:您可以使用 css(width) 函数返回元素的当前宽度。
即。
var myWidth = $("#myElement").css("width");
另请参阅: http://api.jquery.com/width/ http://api.jquery.com/css/
【讨论】:
为什么要降价?这个bugs.jquery.com/ticket/4772 上存在一个错误,看起来在调用它时存在一些不一致,具体取决于您是将样式内联还是放在样式表中jsfiddle.net/boushley/MSyqR/2 我不能用这个得到 %以上是关于在jQuery中获取CSS规则的百分比值的主要内容,如果未能解决你的问题,请参考以下文章
Python - 如果字符串存在于文本中,则获取概率/百分比值
如何以百分比设置 jQuery Mobile 1.4 响应式面板的宽度?