Question

这应该是如此简单，但我正在制造它的恶劣天气。

Div区域设置为：

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

该div的CSS：

.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

Answer 1

您是否尝试过给div个ID并使用document.getElementById('divId')代替？我想如果你想逐个获取元素，你必须使用jquery。

Answer 2

的getElementById（ '搜索Maincontent'）

并将您的div更改为id =“maincontent”

Answer 3

尝试为元素提供id并执行document.getElementById，然后在firebug或其他开发人员工具中执行console.log，并验证您实际上是否正在获取dom元素。

确认您应该可以切换背景颜色

Answer 4

您正在尝试使用其类选择div。这不像通过id获取它那么简单。试试这个：

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

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

您可以在此处查看一个有效的示例：JSFiddle

如果你想使用它的类来获取元素，我建议使用Jquery或其他库。

Answer 5

如果您在线使用Javascript，请使用，而不是：

onchange="changeBackground(this)"

和

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()。

Answer 6

如果您想按类名选择DOM，我建议使用jQuery。

将此代码放入＆lt; head＆gt;你的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");
}

无法使用javascript更改div区域的背景？

6 个答案: