在jQuery中获得CSS规则的百分比值
假设规则如下：
.largeField { width: 65%; } 有没有办法让'65％'回来莫名其妙，而不是像素值？
谢谢。
编辑：不幸的是使用DOM方法是不可靠的在我的情况下，因为我有一个样式表导入其他样式表，结果cssRules参数结束为null或未定义的值。
但是，这种方法可以用在最简单的情况下（一个样式表，文档头标签内的多个单独样式表声明）。
恐怕没有固定的方法。 你可以做这样的事情：
var width = ( 100 * parseFloat($('.largeField').css('width')) / parseFloat($('.largeField').parent().css('width')) ) + '%';
最简单的方法
$('.largeField')[0].style.width // >>> "65%"
这绝对是可能的！
你必须先隐藏（）父元素。 这将阻止JavaScript计算子元素的像素。
$('.parent').hide(); var width = $('.child').width(); $('.parent').show(); alert(width);
看我的例子 。
现在…我想知道如果我是第一个发现这个黑客:)
更新：
一衬垫
element.clone().appendTo('body').wrap('<div style="display: none"></div>').css('width');
它会在</body>标签之前留下一个隐藏的元素，您可能想要.remove() 。
看一个单线的例子 。
我打开更好的想法！
您可以访问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>
后期，但对于新用户， 如果CSS样式包含百分比 ，请尝试以下操作：
$element.prop('style')['width'];
基于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）。 🙂
基于timofey出色而出人意料的解决scheme，下面是一个纯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; }
希望对某人有所帮助。
我在jQuery中获取全局样式表的值也有类似的问题，最终我想出了和上面相同的解决scheme 。
只是想交叉这两个问题，以便其他人可以从后来的调查结果中受益。
你可以把你需要用jQuery访问的样式放在下面的任何一个中：
- 文件头直接
- 在包含中，哪个服务器端脚本然后放在头上
然后它应该是可能的（虽然不一定很容易）编写一个js函数来parsing文档头中样式标签中的所有内容并返回所需的值。
你可以使用css（width）函数来返回元素的当前宽度。
即。
var myWidth = $("#myElement").css("width");
另见： http : //api.jquery.com/width/ http://api.jquery.com/css/
我正在重写user1491819评论作为一个答案，并添加了一点改进（我不能评论，因为低信誉）。
user1491819创build了这个非常有用的function：
function getCssWidth(childSelector) { return jQuery(childSelector).parent().clone().hide().find(childSelector).width(); }
但是这个函数返回像素的数量或没有单位的百分比，所以你需要猜测哪一个是。 对于不猜测你可以使用CSS（'宽度'），它也会返回单位。 所以用单位来得到值的函数应该是：
function getCssWidth(childSelector) { return jQuery(childSelector).parent().clone().hide().find(childSelector).css('width'); }
jQuery中没有任何东西，即使在JavaScript中也没有什么简单的。 以timofey的答案和运行它，我创build了这个function，可以得到任何你想要的属性：
// 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 }
