Question

喜在我的PHP应用程序中，我想使用javascript

更改样式

<div id="middle-cnt" class="ad-image-wrapper"><div class="ad-image" style="width: 1000px; height: 450px; top: 0px; left: 131px;"><img height="450" width="1000" src="images/Gallery2/4.jpg"><p class="ad-image-description" style="width: 1000px; bottom: 0px;"><table width="100%"><tbody><tr><td class="image-desc">Stevie III &ndash; 36" long x 24" wide - Oil on Canvas<div style="color: rgb(187, 167, 0); padding-left: 10px; position: absolute; top: 0pt; left: 450px; font-size: 35px; letter-spacing: 6px;">SOLD</div></td></tr></tbody></table></p></div></div>

在baove代码中我想更改左边的div样式：0px ie <div id="middle-cnt" class="ad-image-wrapper" ><div class="ad-image" style="width: 1000px; height: 450px; top: 0px; left: 0px;"><img ..

我正在使用下面的脚本。

function fnshowgallery(){
var elm=document.getElementById('middle-cnt').childNodes;

    var divElm=elm[0];
    divElm.style.Left='0px';


}

但它没有得到理想的结果。

有人知道吗？

但我不知道怎么做。

Answer 1

document.getElementById("middle-cnt").childNodes[0].style.left = "0px";

这应该可行，如果没有，请仔细检查你的DOM结构。

Answer 2

如果您希望左 - 属性产生任何效果，该元素也需要位置 - 属性。

Answer 3

javascript是一种区分大小写的语言。这是骆驼案。所以它不是左而是**。它必须是：

divElm.style.left='0px';

Answer 4

如果我在我的控制台中使用该HTML片段评估该javascript，它可以正常工作; “左”样式更改为0px。

但，我认为您需要让父母（＃middle-cnt）拥有position:relative，将div（.ad-image）设为position:absolute。也许你的样式表中有这个......

如果您说出您测试过的浏览器，也可以提供帮助。

Answer 5

与使用JavaScript直接操作CSS不同，它通常是仅使用JavaScript设置CSS类名并将所有CSS保留在.css文件中的更好方法。例如：

/* CSS */
.foo {
    height:450px;
    left:0;
    position:relative; /* or maybe absolute? */
    top:0;
    width:1000px;
}

然后将您的JavaScript更改为：

var elm = document.getElementById('middle-cnt').childNodes[0];
if (elm) {
    var cssClass = (elm.className) ? ' foo' : 'foo';
    elm.className += cssClass;
}

然后，如果您需要对CSS进行任何更改，则不需要触摸Javascript。

但要使left属性适用于您的CSS，您需要将position属性设置为relative或absolute。

使用javascript更改css样式

5 个答案: