小编jsg*_*ove的帖子

可能重复:
如何使用变量作为名称向Javascript对象添加属性？
在JavaScript文字中使用变量作为属性名称？

是否可以在JavaScript中添加变量作为对象的属性名称,如下所示:

var myVar = "name";
var myObject = {
    {myVar}: "value"
};

有没有办法检测浏览器是否具有元素的子像素精度？

与任何其他主流浏览器不同,IE9的元素具有亚像素精度(元素宽度可以是50.25px),因此,我需要以不同的方式处理事物.

一种方法是使用jQuery来检测浏览器名称和版本,但这在jQuery中已被弃用,不推荐使用,而是建议应该测试是否存在功能而不是浏览器名称和版本.

我想更好地理解何时使用类来定位内容而不是其他可用选项,特别是后代选择器.

在许多情况下,可以使用后代选择器来定位相同的元素,而不是使用类.如果可以通过两种方式完成同样的事情,那么决定选项之间的逻辑是什么？

以下是一些示例场景:

1.

一个.

<div class="main">
     <div>
         <div> /* target */
             <div></div>
         </div>
     </div>
</div>

.main > div > div

湾

<div class="main">
     <div>
         <div class="content">
             <div></div>
         </div>
     </div>
</div>

.content

2.

一个.

<div class="main">
     <div> /* target */
        <div></div>
     </div>
     <div> /* target */
        <div></div>
     </div>
</div>

.main > div:first-child
.main > div:last-child

湾

<div class="main">
     <div class="content1">
        <div></div>
     </div>
     <div class="content2">
        <div></div>
     </div>
</div>

.content1
.content2

3.

一个.

<div class="main">
     <div>
         <div></div>
         <div></div>
         <div></div>
     </div>
</div>

.main …

我有3个div,#left,#center和#right,我想要在具有特定宽度的同一行上定位,比如300px.

#left和#right的内容很少,比如50px,我正在完全展示它们.

#center有很多内容,比如说400px,我希望尽可能在线上的剩余空间内显示.为此,我在#inner中包含了#center的内容.

我把#left和#center放到左边,#right放到右边.

<div id="left">
    LEFT
</div>
<div id="center">
    <div id="inner">
        LONG CONTENT ...
    </div>
</div>
<div id="right">
    RIGHT
</div>

示例小提琴

问题1:有没有办法让#center div通过CSS占用线路上的所有剩余空间(在我们的例子中,#center必须是200px宽 - 线宽,300px,减去宽度#left和#right,每个50px)？

问题2:我没有通过CSS找到解决方案,我使用jQuery动态计算剩余的可用空间.这适用于IE9以外的所有浏览器.

IE9的问题在于它具有子像素精度,而jQuery仅返回元素维度的整数值.

这是一个例子:IE9认为#left的宽度为50.5px,而jQuery认为它具有50px.这种差异导致IE9中的布局中断.

如果我需要通过JavaScript计算可用空间,我该怎么做才能克服这个IE9问题？

我遇到了CSS转换问题，在尝试其他操作之前，我想了解问题所在。

容器中有3个盒子，还有一个“下一步”按钮。目的是使下一个框顶部显示在顶部，并在按下“下一步”按钮时淡入。该框通过将其附加到容器而位于顶部，因此它被添加为最后一个元素，因此在顶部可见，并且应通过CSS过渡淡入。

问题在于，在添加框之后，css转换似乎无法正常工作。如果在未附加的box元素上进行测试，则css过渡效果很好。

在这里摆弄，下面的代码：

HTML：

<div class="container">
    <div class="box red"></div>
    <div class="box blue"></div>
    <div class="box green"></div>
</div>

<div id="next">Next</div>

JS：

var container = $(".container");

// Save the current list order
var list = container.children(".box");
// The current index
var current = 0;

// Put the first on top
container.append(list[0]);

function next() {
    // Figure out what is the index of the next box
    if (current + 1 < list.length) current++;
    else current = 0;

    // Save it in a …