我正在影响CSS来改变绝对位置。为什么这个用于制作div的jQuery代码转到右上角或左上角不起作用?
jQuery的 - 这种改变绝对定位的左上角和右上角,最终我想这样做的每一个角落,但我开始与这个
$('#topLeft').click(function() {
$('#questionField').css('top', '0');
$('#questionField').css('left', '0');
});
$('#topRight').click(function() {
$('#questionField').css('top', '0');
$('#questionField').css('right', '0');
});
HTML(是不是所有我的ID和这种正确的):
<body>
<div id="questionField">
<form id="questions" action="process.html">
<fieldset>
<legend>Hello World!</legend>
<p>Firstly, which corner would you like this question box to be in?</p>
<input type="radio" name="corner" id="topLeft" /><label for="topLeft"> Top Left</label><br />
<input type="radio" name="corner" id="topRight" /><label for="topRight"> Top Right</label><br />
<input type="radio" name="corner" id="bottomLeft" /><label for="bottomLeft"> Bottom Left</label><br />
<input type="radio" name="corner" id="bottomRight" /><label for="bottomRight"> Bottom Right</label><br />
<p>Now, some questions.</p>
<label for="color">Favorite Color: </label><input type="text" id="color" /><br />
<label for="animal">Favorite Animal: </label><input type="text" id="animal" /><br />
<label for="paintBrush">Favorite Paint Brush: </label><input type="text" id="paintBrush" /><br />
<label for="movie">Favorite Movie: </label><input type="text" id="movie" />
</fieldset>
</form>
</div>
</body>
CSS(它的工作原理,如果我手动影响这个没有的jQuery,但是jQuery的似乎并不想影响它!):
#questionField {
position: absolute;
top: auto;
bottom: auto;
left: auto;
right: auto;
padding: 10px;
}
这真的很好。非常感谢你,正是我想要的。 快速的问题,如果我可以:1. .css({});东西覆盖CSS,或添加到它?我假设覆盖。 –
@DougSmith它只覆盖正在设置的CSS属性。其他的CSS属性是独立的,这是造成你的问题。这就是说:我不想自吹自擂,但是您应该尝试添加和删除类而不是单独的样式,因为它使代码更容易调整和管理,因为它越来越复杂。您不必担心覆盖不需要的CSS属性,因为当旧类被移除时它们会消失。 – Blazemonger
我同意在大多数情况下添加和删除类更容易管理长期,所以你可能希望适应该方法。当然,我的答案中有三个部分都对完成这项工作做出了贡献,而JavaScript只是其中的一部分。 – Fenton