javascript - 使用 jQuery 以百分比形式获取 html 元素的宽度

Question

如果我alert将具有 css 选择器设置为的元素设置为width:100%in px，是否有某种方法可以%从 css 中获取它，我需要它来修复一些具有流畅布局的脚本。

// css
.my-element {
    width:100%;
}

// javascript
alert('width: '+$('.my-element').css('width'));
// this alerts "width: 1116px" instead of "width: 100%"

也许这样的事情总是正确的？

alert($('.my-element').outerWidth() == $('.my-element').parent().outerWidth());

Answer 1

function percentwidth(elem){
    var pa= elem.offsetParent || elem;
    return ((elem.offsetWidth/pa.offsetWidth)*100).toFixed(2)+'%';
}

Answer 2

您可以通过两种方法获得百分比宽度。

现场演示

使用 jQuery 使用 jQuery 1.3.2，您将获得 100%。

alert($('.my-element').css('width'))​;

使用javascript通过在标签的样式属性中设置宽度，如下所示

<div id="div2" style="width:100%"></div>

div2 = document.getElementById('div2');

alert("Width of div2 with style = " + div2.style.width);

Answer 3

这个帖子

根据开发人员使用 CSS 指定的内容，是否可以使用 jQuery 以百分比或像素为单位获取元素的宽度？