如何使用JavaScript来改变DIV背景颜色
-
18-09-2019 - |
题
的HTML如下:
<div id="catestory">
<div class="content">
<h2>some title here</h2>
<p>some content here</p>
</div>
<div class="content">
<h2>some title here</h2>
<p>some content here</p>
</div>
<div class="content">
<h2>some title here</h2>
<p>some content here</p>
</div>
</div>
当鼠标悬停div的内容,那么它的backgroundColor和H2(这个div内)的backgroundColor变化(就像CSS:悬停)
我知道这可以用CSS(:悬停)。要做到这一点在现代浏览器,但IE6简化版,工作
如何使用JavaScript(未jQuery的或其它JS框架)要这样做吗?
修改:如何改变H2的backgroundColor太强>
解决方案
var div = document.getElementById( 'div_id' );
div.onmouseover = function() {
this.style.backgroundColor = 'green';
var h2s = this.getElementsByTagName( 'h2' );
h2s[0].style.backgroundColor = 'blue';
};
div.onmouseout = function() {
this.style.backgroundColor = 'transparent';
var h2s = this.getElementsByTagName( 'h2' );
h2s[0].style.backgroundColor = 'transparent';
};
其他提示
在代码元素的添加/改变风格是一种不好的做法。今天你要改变背景的颜色的明天,你想改变背景的图像的和后天你决定,这也将是不错的改变的边框的。
编辑代码只因为设计要求改变每时间是一种痛苦。另外,如果您的项目将增长,改变js文件会更加痛苦。更多的代码,更多的痛苦。
尽量避免重复使用硬编码的风格,这将节省您的时间,如果你这样做是正确的,你可以要求做了“改变颜色”的任务给别人。
所以,不是改变风格直接的属性,你可以添加/节点上删除CSS类。在特定情况下,你只需要为父节点做到这一点 - “格”,然后,这种风格体现在CSS的子节点。因此,没有必要特定样式属性应用于DIV和H2。
一个更推荐点。尽量不要硬编码的连接节点,但使用一些语义来做到这一点。例如:“为了事件添加到具有类‘内容’的所有节点
。总之,这里是代码,我会使用这样的任务:
//for adding a css class
function onOver(node){
node.className = node.className + ' Hover';
}
//for removing a css class
function onOut(node){
node.className = node.className.replace('Hover','');
}
function connect(node,event,fnc){
if(node.addEventListener){
node.addEventListener(event.substring(2,event.length),function(){
fnc(node);
},false);
}else if(node.attachEvent){
node.attachEvent(event,function(){
fnc(node);
});
}
}
// run this one when window is loaded
var divs = document.getElementsByTagName("div");
for(var i=0,div;div =divs[i];i++){
if(div.className.match('content')){
connect(div,'onmouseover',onOver);
connect(div,'onmouseout',onOut);
}
}
和你的CSS对子级是这样的:
.content {
background-color: blue;
}
.content.Hover{
background-color: red;
}
.content.Hover h2{
background-color : yellow;
}
访问要通过DOM来改变,例如用document.getElementById()
或通过在事件处理this
,并更改样式在元素的元素:
document.getElementById("MyHeader").style.backgroundColor='red';
修改强>
可以使用的getElementsByTagName 太,(另)例如:
function colorElementAndH2(elem, colorElem, colorH2) {
// change element background color
elem.style.backgroundColor = colorElem;
// color first contained h2
var h2s = elem.getElementsByTagName("h2");
if (h2s.length > 0)
{
hs2[0].style.backgroundColor = colorH2;
}
}
// add event handlers when complete document has been loaded
window.onload = function() {
// add to _all_ divs (not sure if this is what you want though)
var elems = document.getElementsByTagName("div");
for(i = 0; i < elems.length; ++i)
{
elems[i].onmouseover = function() { colorElementAndH2(this, 'red', 'blue'); }
elems[i].onmouseout = function() { colorElementAndH2(this, 'transparent', 'transparent'); }
}
}
<script type="text/javascript">
function enter(elem){
elem.style.backgroundColor = '#FF0000';
}
function leave(elem){
elem.style.backgroundColor = '#FFFFFF';
}
</script>
<div onmouseover="enter(this)" onmouseout="leave(this)">
Some Text
</div>
因为我真的不是一个严重的程序员,我在编程青霉素的发明的方式发现的东西这一条可能是有点怪。那么如何改变鼠标悬停的元素?使用:hover
属性,正如与a
元件。
示例:
div.classname:hover
{
background-color: black;
}
此改变与类div
任何classname
会对mousover黑色背景。您可以基本不变的任何属性。测试在IE和Firefox
快乐编程!
如果你愿意插入非语义节点插入到文档中,您可以通过假一标签包裹你的div做到这一点的只有CSS-IE兼容的方式。
<style type="text/css">
.content {
background: #ccc;
}
.fakeLink { /* This is to make the link not look like one */
cursor: default;
text-decoration: none;
color: #000;
}
a.fakeLink:hover .content {
background: #000;
color: #fff;
}
</style>
<div id="catestory">
<a href="#" onclick="return false();" class="fakeLink">
<div class="content">
<h2>some title here</h2>
<p>some content here</p>
</div>
</a>
<a href="#" onclick="return false();" class="fakeLink">
<div class="content">
<h2>some title here</h2>
<p>some content here</p>
</div>
</a>
<a href="#" onclick="return false();" class="fakeLink">
<div class="content">
<h2>some title here</h2>
<p>some content here</p>
</div>
</a>
</div>
要做到这一点没有jQuery的或任何其他图书馆,你需要连接的onMouseOver和onmouseout事件,每个格和改变风格的事件处理程序。
例如:
var category = document.getElementById("catestory");
for (var child = category.firstChild; child != null; child = child.nextSibling) {
if (child.nodeType == 1 && child.className == "content") {
child.onmouseover = function() {
this.style.backgroundColor = "#FF0000";
}
child.onmouseout = function() {
// Set to transparent to let the original background show through.
this.style.backgroundColor = "transparent";
}
}
}
如果您H2还没有设置自己的背景,在div背景将显示通过太色了。
您可以试试这个脚本。 :)
<html>
<head>
<title>Div BG color</title>
<script type="text/javascript">
function Off(idecko)
{
document.getElementById(idecko).style.background="rgba(0,0,0,0)"; <!--- Default --->
}
function cOn(idecko)
{
document.getElementById(idecko).style.background="rgb(0,60,255)"; <!--- New content color --->
}
function hOn(idecko)
{
document.getElementById(idecko).style.background="rgb(60,255,0)"; <!--- New h2 color --->
}
</script>
</head>
<body>
<div id="catestory">
<div class="content" id="myid1" onmouseover="cOn('myid1'); hOn('h21')" onmouseout="Off('myid1'); Off('h21')">
<h2 id="h21">some title here</h2>
<p>some content here</p>
</div>
<div class="content" id="myid2" onmouseover="cOn('myid2'); hOn('h22')" onmouseout="Off('myid2'); Off('h22')">
<h2 id="h22">some title here</h2>
<p>some content here</p>
</div>
<div class="content" id="myid3" onmouseover="cOn('myid3'); hOn('h23')" onmouseout="Off('myid3'); Off('h23')">
<h2 id="h23">some title here</h2>
<p>some content here</p>
</div>
</div>
</body>
<html>
这很简单,只需使用JavaScript的功能和的onclick称之为
<script type="text/javascript">
function change()
{
document.getElementById("catestory").style.backgroundColor="#666666";
}
</script>
<a href="#" onclick="change()">Change Bacckground Color</a>