不能使用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区域的背景吗？

回答

相关问题