相关疑难解决方法(0)

我正在编写一个jQuery插件,我需要做的是确定用户指定的元素的宽度.问题是.width()或.css('width')将始终报告精确的像素,即使开发人员已经使用CSS分配了宽度:90%.

有没有办法让jQuery输出px或%中元素的宽度,具体取决于开发人员用CSS给出的内容？

如何使用CSS规则设置元素CSS属性(例如宽度/高度),无论以何种单位设置(例如,百分比/ em/px)？(在谷歌浏览器中,最好是无框架的).

使用getComputedStyle以像素为单位返回当前值css(),jQuery中也是如此.

例如:

<div class="b">first</div>
<div id="a" class="a">second</div>

<style>
     div      { width: 100px; }
     x, div#a { width: 50%;   }
     .a       { width: 75%;   }
</style>

在迭代div本例中的所有元素时,我希望能够得到第二个div宽度为50%(和第一个宽度100px).

Chrome元素检查器可以在设置时显示CSS属性值,因此应该可以在Chrome中使用.

不是链接问题的完全重复,因为在接受的答案中有一个简单的hack,无论设置何种宽度,都会产生百分比宽度.其余的你必须知道用于制定活动规则的选择器吗？怎么会知道的？

我们safe-area-inset-left,safe-area-inset-right,safe-area-inset-top,和safe-area-inset-bottom在CSS,但我们怎样才能使用JavaScript的价值？

有些事情我不清楚:

var myDiv = document.getElementById("myDiv");
var computedStyle = window.getComputedStyle(myDiv);

1)如果只有一种颜色,则不可能直接获得div的全局边框颜色,每边都相同:

computedStyle.getPropertyValue("border-color");

而不是做:

computedStyle.getPropertyValue("border-left-color");

要么

computedStyle.getPropertyValue("border-right-color");

要么

computedStyle.getPropertyValue("border-top-color");

...

2)当在CSS文件中具有样式属性时,它们只能通过getComputedStyle方法访问,而不能通过样式属性(如内联定义的样式属性)访问,通过div中的样式属性,我是对的吗？

myDiv.style.getPropertyValue("border-left-color");

这不行.

3)如果我们要设置样式属性,我们必须使用元素的style属性,是不是可以使用计算出的样式对象？

computedStyle.setProperty("border-color", "yellowgreen", null);

我认为使用style属性是"旧方法",比如使用内联样式属性或使用object.style.property ="value"在Javascript中设置样式属性.

谢谢.

jsFiddle:http://jsfiddle.net/pgtFR/12/

如果我alert其中有一个CSS选择器设置为元素width:100%,我得到它在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());