Question

我正在尝试根据特定条件重新定位页面上的div。

if (somecondition)
    document.getElementById("Div1").setAttribute("style", "position: absolute; left:297px; top:882px; height: 30px; width: 181px; margin-top: 0px;");

它不是在下面的html中重新定位div：

<div id="Div1" style="top:366px; left:134px; position:absolute; height: 30px; width: 175px;">

if fires中的其他代码。

有人可以帮忙吗？浏览器：IE8

Answer 1

如果要将更改反映在文档中，则使用setAttribute是不可靠的。请改用Element.style：

var el = document.getElementById('Div1');
el.style.position = 'absolute';
el.style.left = '397px';
el.style.top = '882px';
el.style.height = '30px';
el.style.width = '181px';
el.style.marginTop = '0px';

Answer 2

你只需要做

document.getElementById("Div1").style.<some css property> = <some value>; // like
document.getElementById("Div1").style.left = "297px";
document.getElementById("Div1").style.top = "882px";

（当然你应该缓存getELementById）

Answer 3

要将CSS用作单个字符串，您应该设置Element.style.cssText属性：

var element = document.getElementById("Div1");
element.style.cssText = "position: absolute; left:297px; top:882px; height: 30px; " +
                        "width: 181px; margin-top: 0px;";

Answer 4

它的工作完全正常，请查看the demo here。

<强> HTML：

<div id="Div1" style="top:366px; left:134px; position:absolute; height: 30px; width: 175px;">
    hello world
</div>

<强>使用Javascript：

document.getElementById（＆＃34; Div1＆＃34;）。setAttribute（＆＃34; style＆＃34;，＆＃34; position：absolute; left：297px; top：82px; height：30px; width： 181px; margin-top：0px;＆＃34;）;

Answer 5

制作两个样式类，并为类添加两个不同的位置。如果满足javascript条件，则更改DIVs类。 E.g：

if(someCondition) {
    document.getElementById('Div1').setAttribute('class', 'style2');
} else {
    document.getElementById('Div1').setAttribute('class', 'style1');
}

CSS样式

.style1 {
    top:366px;
    left:134px;
    position:absolute;
    height: 30px;
    width: 175px;
}

.style2 {
    position: absolute;
    left:297px;
    top:882px;
    height: 30px;
    width: 181px;
    margin-top: 0px;

HTML

<div id="Div1" class="style1"></div>

Answer 6

尝试

document.getElementById("Div1").style.left = "297px";
document.getElementById("Div1").style.top = "882px";

Answer 7

你没有把javascript代码放在document.ready（function（）{}）;？

使用Javascript </div>重新定位<div>

7 个答案: