使用JS或JQuery更改DIV中每个元素的CSS位置

Question

我有一个position:relative的Div，其中包含“一个或多个”图像，postion:absolute包含一些顶部和左侧值。我需要使用JS或JQuery在按钮Absolute和Auto/Relative之间切换所有图像的位置属性。 有没有办法一次使用所有这些儿童图像？

Answer 1

只需使用jQuery选择器，它包含div中的所有图像。例如，如果您的div的id为“divId”，那么要将该位置设置为该div中所有图像的相对位置，您将使用：

$(document).ready(function() {
  $("#button").click(function() {
    $("#divId img").css("position", "relative")
  });
});

Answer 2

尝试以下方法：

<强> HTML

<div class="wrapper">
    <img src="http://dummyimage.com/15x15/000/fff" class='absPosition'>
</div>
<input type="button" value="change position">

<强> CSS

.wrapper {
    height:300px;
    position:relative;
}
.absPosition {
    position:absolute;
    bottom:0;
}

<强>的jQuery

$(":button").click(function() {
    $("img").toggleClass("absPosition")
});

演示： http://jsfiddle.net/ZRDdB/

Answer 3

最好使用CSS规则（如CSS规则，而不是JS分配的内联样式）和jQuery的.toggleClass()方法。

如果您有以下标记：

<div id='foo'>
    <img />
    <img />
</div>

和CSS如下：

div#foo { position:relative; }
div#foo img { position:relative; }
div#foo img.absolute { position:absolute; }

您可以使用类似

的内容轻松切换IMG s位置规则

$('button').click(function() {
    $('div#foo img').toggleClass('absolute');
});