使用javascript更改CSS樣式

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，即<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

而不是操縱CSS用JavaScript直接它通常是一個更好的辦法， 只使用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 。