不能使用javascript更改div區域的背景嗎？

這應該是這麼簡單，但我正在惡劣的天氣。不能使用javascript更改div區域的背景嗎？

事業部區域載列：

<div class="maincontent"> 
Stuff in my div 
</div>

CSS爲DIV：

.maincontent{ 
    height: 100%; 
    background-size: 100%; 
    margin-left:1%; 
    margin-right:1%; 
    font-size:16px; 
}

然後，我有：

onLoad=changeBackground();

但在此之前，我有以下功能：

function changeBackground(){ 
    document.getElementByAnything('maincontent').style.backgroundColor="yellow";  
}

我知道它調用函數，因爲如果我把一個警告框放在那裏顯示。但是，無論getElementBy的組合如何，我都無法對背景進行任何更改？

請幫忙，因爲它的駕駛我瘋了！

TIA

來源

2012-02-01 Eric Banderhide

您是否嘗試過給你div ID和使用document.getElementById('divId')呢？我想如果你想通過類獲得元素，你必須使用jQuery。

來源

2012-02-01 14:48:42

的getElementById（ '搜索Maincontent'）

，改變你的DIV有一個id = 「搜索Maincontent」

來源

2012-02-01 14:47:54 Jeepstone

這也需要他將風格從班級改爲ID。 – 2012-02-01 14:52:54

先給元素一個id和做的document.getElementById然後執行控制檯.log在螢火蟲或其他開發者工具中，並確認你確實得到了一個dom元素。

一旦確認，你應該然後能夠切換背景顏色

來源

2012-02-01 14:48:17 darren102

你正在嘗試使用它的類來選擇div。這不像通過id得到它那麼簡單。試試這個：

<div class="maincontent" id='mainContent'> 
Stuff in my div 
</div> 

function changeBackground(){ 
    document.getElementById('mainContent').style.backgroundColor="yellow";  
}

這裏你可以看到一個工作示例：JSFiddle

如果你想使用它的類來獲取元素，我會建議使用Jquery或另一個庫。

來源

2012-02-01 14:50:42 NibblyPig

在ID名稱中使用大寫字母時要小心。 CSS並不總是喜歡它。 – 2012-02-01 14:56:45

我從來沒有聽說過。谷歌搜索CSS標準返回結果說使用單詞分隔符或標準camelCaseConvention。 – NibblyPig 2012-02-01 15:06:55

呃，我以前在某些瀏覽器上遇到過問題（尤其是Safari）。 – 2012-02-01 15:39:40

如果您想按類名選擇DOM，我推薦使用jQuery。

將這個代碼在你<頭的HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

的>部分，改變你的函數

function changeBackground() { 
    $(".maincontent").css("background-color","yellow"); 
}

來源

2012-02-01 14:57:48 InspiredJW

如果您使用的是一行JavaScript再使用，而不是：

onchange="changeBackground(this)"

And：

function changeBackground(elem){ 
    elem.style.backgroundColor = "yellow"; 
}

編輯我突然想起你在討論基於div元素的事件。作爲div本身不支持onchange情況下，我建議你的代碼修改爲以下（雖然改變了事件型onmouseover到任何事件中，你找到最合適的）：

function changeBackground(elem){ 
    elem.style.backgroundColor = 'yellow'; 
};

JS Fiddle demo。

另外，從主代碼移除的事件，並讓JavaScript的更便攜，少「侵入」：

function changeBackground(elem){ 
    elem.style.backgroundColor = 'yellow'; 
} 

var maincontents = document.getElementsByClassName('maincontent'); 

for (var i=0,len=maincontents.length; i<len; i++){ 
    maincontents[i].onmouseover = function(){ 
     changeBackground(this); 
    } 
}

JS Fiddle demo。

但請記住，某些瀏覽器（such as Internet Explorer 8 and below）不支持getElementsByClassName()。

來源

2012-02-01 14:58:57

最乾淨的方式來做到這一點。 – 2012-02-01 14:59:24

不能使用javascript更改div區域的背景嗎？

回答

相關問題