blocks|key|345614|text|恐怕没有内置的方法。你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|345615|var+width+=+(+100+*+parseFloat($('.largeField').css('width'))+/+parseFloat($('.largeField').parent().css('width'))+)+%2B+'%25';|code-block|syntax|javascript|345616|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

There's no built-in way, I'm afraid. You can do something like this:

<pre><code>var width = ( 100 * parseFloat($('.largeField').css('width')) / parseFloat($('.largeField').parent().css('width')) ) + '%';
</code></pre>

blocks|key|3331980|text|您可以将需要使用jQuery访问的样式放在以下位置之一：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3331981|3331982|将文档头直接包含在|ordered-list-item|3331983|中，服务器端脚本随后将其放入head|3331984|中|3331985|然后，应该可以(尽管不一定容易)编写一个js函数来解析文档头中的样式标记中的所有内容，并返回所需的值。|3331986|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|O|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|Q|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

You could put styles you need to access with jQuery in either:

<ol>
<li>the head of the document directly</li>
<li>in an include, which server side script then puts in the head</li>
</ol>

Then it should be possible (though not necessarily easy) to write a js function to parse everything within the style tags in the document head and return the value you need.

blocks|key|3119515|text|您可以访问document.styleSheets对象：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3119516|<style+type="text/css">
++++.largeField+{
++++++++width:+65%25;
++++}
</style>
<script+type="text/javascript">
++++var+rules+=+document.styleSheets[0].rules+%7C%7C+document.styleSheets[0].cssRules;
++++for+(var+i=0;+i+<+rules.length;+i%2B%2B)+{
++++++++var+rule+=+rules[i];
++++++++if+(rule.selectorText.toLowerCase()+==+".largefield")+{
++++++++++++alert(rule.style.getPropertyValue("width"));
++++++++}
++++}
</script>|code-block|syntax|javascript|3119517|entityMap^0|5|K|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

You could access the <code>document.styleSheets</code> object:

<pre><code>&lt;style type="text/css"&gt;
 .largeField {
 width: 65%;
 }
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
 var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
 for (var i=0; i &lt; rules.length; i++) {
 var rule = rules[i];
 if (rule.selectorText.toLowerCase() == ".largefield") {
 alert(rule.style.getPropertyValue("width"));
 }
 }
&lt;/script&gt;
</code></pre>

blocks|key|3332021|text|可以使用css(+width+)函数返回元素的当前宽度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3332022|即。|3332023|var+myWidth+=+$("#myElement").css("width");|code-block|syntax|javascript|3332024|另请参阅：http://api.jquery.com/width/+http://api.jquery.com/css/|offset|length|3332025|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/width/|1|http://api.jquery.com/css/^0|0|0|0|5|S|0|Y|Q|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$K|10|L|11|1|12]|$K|13|L|14|1|15]]|A|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]|U|$5|P|Q|R|A|$S|V]]]]

You can use the css(width) function to return the current width of the element.

ie. 

<pre><code>var myWidth = $("#myElement").css("width");
</code></pre>

See also:
<a href="http://api.jquery.com/width/" rel="nofollow noreferrer">http://api.jquery.com/width/</a>
<a href="http://api.jquery.com/css/" rel="nofollow noreferrer">http://api.jquery.com/css/</a>

blocks|key|344666|text|我在Getting+values+of+global+stylesheet+in+jQuery中遇到了类似的问题，最终我想到了same+solution+as+above。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|344667|我只是想把这两个问题联系起来，这样其他人就可以从以后的发现中受益。|344668|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/7131462/getting-values-of-global-stylesheet-in-jquery|1|https://stackoverflow.com/questions/7131462/getting-values-of-global-stylesheet-in-jquery/7132264#7132264^0|2|19|0|1R|M|1|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]|$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

I have a similar issue in <a href="https://stackoverflow.com/questions/7131462/getting-values-of-global-stylesheet-in-jquery">Getting values of global stylesheet in jQuery</a>, eventually I came up with the <a href="https://stackoverflow.com/questions/7131462/getting-values-of-global-stylesheet-in-jquery/7132264#7132264">same solution as above</a>.

Just wanted to crosslink the two questions so others can benefit from later findings.

blocks|key|3119622|text|最简单的方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3119623|$('.largeField')[0].style.width

//+>>>+"65%25"|code-block|syntax|javascript|3119624|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Most easy way

<pre><code>$('.largeField')[0].style.width

// &gt;&gt;&gt; "65%"
</code></pre>

blocks|key|345677|text|一个基于Adams的jQuery插件回答：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|345678|(function+($)+{

++++$.fn.getWidthInPercent+=+function+()+{
++++++++var+width+=+parseFloat($(this).css('width'))/parseFloat($(this).parent().css('width'));
++++++++return+Math.round(100*width)%2B'%25';
++++};

})(jQuery);

$('body').html($('.largeField').getWidthInPercent());​​​​​|code-block|syntax|javascript|345679|将返回'65%25‘。如果你喜欢if+(width=='65%25')，那么只返回四舍五入的数字才能更好地工作。如果你直接使用Adams+answer，那是行不通的(我得到了大约64.93288590604027)。:)|345680|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

A jQuery plugin based on Adams answer:

<pre><code>(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());​​​​​
</code></pre>

Will return '65%'. Only returns rounded numbers to work better if you do like if (width=='65%'). If you would have used Adams answer directly, that hadn't worked (I got something like 64.93288590604027). :)

blocks|key|3332191|text|这绝对是可能的！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3332192|您必须首先隐藏()父元素。这将阻止JavaScript计算子元素的像素。|3332193|$('.parent').hide();
var+width+=+$('.child').width();
$('.parent').show();
alert(width);|code-block|syntax|javascript|3332194|请参阅我的example。|offset|length|3332195|现在..。我想知道我是否是第一个发现这个黑客的人：)|3332196|更新：|style|BOLD|3332197|一句话|3332198|element.clone().appendTo('body').wrap('<div+style="display:+none"></div>').css('width');|3332199|它将在您可能想要.remove()的</body>标记之前留下一个隐藏元素。|CODE|3332200|请参见example+of+one-liner。|3332201|我对更好的想法持开放态度！|3332202|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/sxqnt/|1|http://jsfiddle.net/sxqnt/76/^0|0|0|0|5|7|0|0|0|0|3|0|0|0|8|9|I|7|0|3|K|1|0|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1E|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1F|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1G|8|@]|9|@$K|1H|L|1I|1|1J]]|A|$]]|$1|M|3|N|5|6|7|1K|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1L|8|@$K|1M|L|1N|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1O|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|1P|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|6|7|1Q|8|@$K|1R|L|1S|Q|Y]|$K|1T|L|1U|Q|Y]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1V|8|@]|9|@$K|1W|L|1X|1|1Y]]|A|$]]|$1|11|3|12|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|13|3|-4|5|6|7|20|8|@]|9|@]|A|$]]]|14|$15|$5|16|17|18|A|$19|1A]]|1B|$5|16|17|18|A|$19|1C]]]]

This is most definitely possible! 

You must first hide() the parent element. This will prevent JavaScript from calculating pixels for the child element.

<pre><code>$('.parent').hide();
var width = $('.child').width();
$('.parent').show();
alert(width);
</code></pre>

See my <a href="http://jsfiddle.net/sxqnt/" rel="noreferrer">example</a>.

Now... I wonder if I'm first to discover this hack:)

Update:

<h1>One-liner</h1>

<pre><code>element.clone().appendTo('body').wrap('&lt;div style="display: none"&gt;&lt;/div&gt;').css('width');
</code></pre>

It will leave behind a hidden element before the <code>&lt;/body&gt;</code> tag, which you may want to <code>.remove()</code>.

See an <a href="http://jsfiddle.net/sxqnt/76/" rel="noreferrer">example of one-liner</a>.

I'm open to better ideas!

blocks|key|343352|text|在timofey优秀且令人惊讶的解决方案的基础上，这里有一个纯Javascript实现：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|343353|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;
}|code-block|syntax|javascript|343354|希望对某些人有帮助。|343355|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Building on timofey's excellent and surprising solution, here is a pure Javascript implementation:
<pre><code>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;
}
</code></pre>
Hope it's helpful to someone.

blocks|key|345764|text|对于新用户，如果css样式包含百分比，请尝试此|type|unstyled|depth|inlineStyleRanges|entityRanges|data|345765|$element.prop('style')['width'];|code-block|syntax|javascript|345766|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Late, but for newer users, try this if the css style contains a percentage:

<pre><code>$element.prop('style')['width'];
</code></pre>

blocks|key|3119828|text|在jQuery中没有任何东西，甚至在javascript中也没有直接的东西。采用timofey的答案并运行它，我创建了这个函数，它可以获得您想要的任何属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3119829|//+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
}|code-block|syntax|javascript|3119830|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

There's nothing in jQuery, and nothing straightforward even in javascript. Taking timofey's answer and running with it, I created this function that works to get any properties you want: 

<pre><code>// 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
}
</code></pre>

blocks|key|345779|text|使用交叉乘法将像素转换为百分比。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|345780|公式设置：|offset|length|style|BOLD|345781|1.)(element_width_pixels/parent_width_pixels)+=+(element_width_percentage+/+100)|345782|2.)element_width_percentage+=+(100+*+element_width_pixels)+/+parent_width_pixels|345783|实际代码：|345784|<script>

+++var+$width_percentage+=+(100+*+$("#child").width())+/+$("#parent").width();

</script>|code-block|syntax|javascript|345785|entityMap^0|0|0|5|0|0|0|0|5|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|Z|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|10|8|@$D|11|E|12|F|G]]|9|@]|A|$]]|$1|N|3|O|5|P|7|13|8|@]|9|@]|A|$Q|R]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

Convert from pixels to percentage using cross multiplication. 

Formula Setup: 

1.) 
(element_width_pixels/parent_width_pixels) = (element_width_percentage / 100)

2.) element_width_percentage = 
(100 * element_width_pixels) / parent_width_pixels

The actual code:

<pre><code>&lt;script&gt;

 var $width_percentage = (100 * $("#child").width()) / $("#parent").width();

&lt;/script&gt;
</code></pre>

blocks|key|3332384|text|这是一个迟来的回复，但想为那些偶然发现这一点的2020%2B添加新的内容。可能更适合于小众情况，但我想分享几个选择。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3332385|如果知道初始%25值是什么，还可以将这些值赋给样式表的:root中的变量。i.e|3332386|:root+{
++++--large-field-width:+65%25;
}

.largeField+{
++width:+var(--large-field-width);
}|code-block|syntax|javascript|3332387|当您想要在JS中访问此变量时，只需执行以下操作：|3332388|let+fieldWidth+=+getComputedStyle(document.documentElement).getPropertyValue('--large-field-width');
//+returns+65%25+rather+than+the+px+value.+This+is+because+the+%25+has+no+relative
//+size+to+the+root+or+rather+it's+parent.|3332389|另一种选择是在脚本的开头指定默认样式：|3332390|element.style.width+=+'65%25'|3332391|然后可以使用以下命令访问它：|3332392|let+width+=+element.style.width;|3332393|我个人更喜欢第一个选项，但它确实取决于您的用例。这些都是技术上的内联样式，但我喜欢使用JS直接更新变量值的方式。|3332394|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|17|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

A late response but wanted to add on for anyone 2020+ who stumbles across this. Might be more for niche cases but I wanted to share a couple options.
If you know what the initial % value is you can also assign these values to variables in the :root of the style sheet. i.e
<pre><code>:root {
 --large-field-width: 65%;
}

.largeField {
 width: var(--large-field-width);
}
</code></pre>
When you want to access this variable in JS you then simply do the following:
<pre><code>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.
</code></pre>
The other option would be to assign the default styling at the start of your script with:
<pre><code>element.style.width = '65%'
</code></pre>
It can then be accessed with:
<pre><code>let width = element.style.width;
</code></pre>
I personally prefer the first option but it really does depend on your use case. These are both technically inline styling but I like how you can update variable values directly with JS.

Let's say the rule is as follows:

<pre><code>.largeField {
 width: 65%;
}
</code></pre>

Is there a way to get '65%' back somehow, and not the pixel value?

Thanks.

EDIT: Unfortunately using DOM methods is unreliable in my case, as I have a stylesheet which imports other stylesheets, and as a result the cssRules parameter ends up with either null or undefined value. 

This approach, however, would work in most straightforward cases (one stylesheet, multiple separate stylesheet declarations inside the head tag of the document).

get CSS rule's percentage value in jQuery

服务器

jQuery

假设规则如下：.largeField {    width: 65%;}有没有办法拿回'65%‘，而不是像素值？谢谢。编辑：不幸的是，在我的例子中使用DOM方法是不可靠的，因为我有一个导入其他样式表的样式表，因此cssRules参数以null或未定义的值结束。然而，这种方法适用于大多数简单的情况(一个样式表，在文档的h...

问获取CSS规则在jQuery中的百分比值
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取CSS规则在jQuery中的百分比值EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取CSS规则在jQuery中的百分比值
EN