3

我正在尝试根据特定条件在页面上重新定位 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 中的其他代码触发。

任何人都可以帮忙吗？浏览器：IE8

4

7 回答 7

7

如果您希望更改反映在文档中，则使用 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';
于 2012-09-26T13:19:11.603 回答
3

你只需要做

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

（当然你应该缓存getELementById）

于 2012-09-26T13:20:33.073 回答
2

要将 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;";
于 2012-09-26T13:22:15.750 回答
2

它工作得很好，在这里查看演示。

HTML：

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

​</p>

Javascript：

document.getElementById("Div1").setAttribute("style", "position: absolute; left:297px; top:82px; height: 30px; width: 181px; margin-top: 0px;"); ​</p>

于 2012-09-26T13:26:00.460 回答
2

创建两个样式类并为类添加两个不同的位置。如果满足 javascript 条件，则更改 DIVs 类。例如：

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>
于 2012-09-26T13:34:30.463 回答
1

试试看

document.getElementById("Div1").style.left = "297px";
document.getElementById("Div1").style.top = "882px";
于 2012-09-26T13:19:23.520 回答
0

你不是把javascript代码放在document.ready(function(){});中吗？

于 2012-09-26T13:21:58.713 回答