以百分比获取宽度或高度而非像素。

Question

我有一些使用百分比定义height的元素。当我试图将高度保存为一个变量以供使用时，它会以像素或者有时候没有值的形式保存。

例如：

<div id='firstDiv'></div>
 <div id='secondDiv'></div>

CSS代码

#firstDiv{
    width:50%;
    height:50%;
}
#secondDiv{
   width:20%;
   height:50%;
}

Jquery代码

$('div').each(function (){
   console.log($(this)[0].style.height);
}

我该如何将它显示为%？

- Vikram Jakkampudi

---

没有办法直接得到百分比，但是一些小技巧 height/100 可以帮助吗？ - Bhojendra Rauniyar

$(this)[0] 可以直接替换为 this，是吗？ - King King

为什么你需要以百分比的形式呈现这个内容？我们可以使用其他替代方法来达到同样的效果。 - Bhojendra Rauniyar

请查看此链接：https://dev59.com/eW865IYBdhLWcg3wEKSZ#4006610 希望能对您有所帮助。 - makambi

这是用于宽度的，但您也可以将其用于高度 - http://stackoverflow.com/questions/23235461/i-want-this-jquery-to-give-me-position-in-not-in-pixels/23235754#23235754 - Pooja Shah

可能是重复的问题：如何从内联样式中获取百分比高度而不是像素？ - Daniel Cheung

Answer 1

尝试使用jQuery中的间接选项而非直接选项。

var height = ( 100 * parseFloat($(element).css('height')) / parseFloat($(element).parent().css('height')) ) + '%';

- Shafi PS

Answer 2

为了得到百分比的值，您可以将该值除以顶级节点[dom中的第一个父节点]。

 parseFloat($(this)[0].style.height / $('#idOfFirstParent').height ()) * 100;

如果您想获取与DOM中第一个父元素相关的值，或者根据文档的宽度获取值[这将从屏幕的0,0开始]。

 (parseFloat($(this)[0].style.height/ $('window').height ()) * 100).toFixed(2);

                         or 

 (parseFloat($(this)[0].style.height / $('document').height ()) * 100).toFixed(2);

- Janak

---

你确定 style.height 返回了某个值吗？有时它会返回空值（OP也提到了这一点），它不会返回计算后的样式，因此我们可能需要使用 getComputedStyle(element).height 或者使用 jQuery 的 css 方法。 - King King

我使用了这个，因为Vikram没有提到任何关于它的事情，我只是使用了他用来获取高度的脚本。所以我专注于将其转换为百分比。 - Janak

Answer 3

仅计算百分比：

var w = $("#myDiv").css("width").slice(0,-2);
var ww = $(window).width();
console.log(w/ww*100);

- martynas

Answer 4

使用 parseInt(string)。 如果字符串以数字开头，则它会删除任何数字后面的字符。

- scripter

Answer 5

$(this).height() 会返回你的 div 元素高度的百分比值（因为它们是以百分比设置的），并且不带单位。

- user9052544