[英]How do I change backgroundcolor attribute of a div in JavaScript?
[英]How to use JavaScript to change div backgroundColor
下面的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:hover)
我知道這可以使用CSS(:hover)在現代瀏覽器中執行此操作,但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類,而不是更改樣式的直接屬性。 在您的特定情況下,您只需要為父節點 - “div”執行此操作,然后通過CSS設置子節點的樣式。 所以不需要將特定樣式屬性應用於DIV和H2。
還有一個推薦點。 盡量不要連接硬編碼的節點,但使用一些語義來做到這一點。 例如:“將事件添加到具有類'content'的所有節點。
總之,這是我將用於此類任務的代碼:
//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;
}
這將使用類classname
更改任何div
,使其在mousover上具有黑色背景。 您基本上可以更改任何屬性。 在IE和Firefox中測試過
編程愉快!
你可以試試這個腳本。 :)
<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>
要在沒有jQuery或任何其他庫的情況下執行此操作,您需要將onMouseOver和onMouseOut事件附加到每個div並更改事件處理程序中的樣式。
例如:
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背景將顯示並為其着色。
如果您願意在文檔中插入非語義節點,則可以通過將div包裝在假A標簽中,以僅與CSS兼容的方式執行此操作。
<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>
只需在javaScript上使用一個函數並在onclick上調用它就非常簡單
<script type="text/javascript">
function change()
{
document.getElementById("catestory").style.backgroundColor="#666666";
}
</script>
<a href="#" onclick="change()">Change Bacckground Color</a>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.