使用JavaScript HTML更改背景色的最佳方式DOM DOM

什麼是使用JavaScript更改元素背景顏色的最合適和跨瀏覽器兼容的方式？使用JavaScript HTML更改背景色的最佳方式DOM DOM

<!DOCTYPE html> 
<html> 
<head> 
<title>Demo page</title> 
</head> 
<body> 

<h1 id="head1" style="background-color:red">This is a heading</h1> 

<script> 

// this one? 
document.getElementById("head1").style["background-color"] = "yellow"; 

// this one? 
document.getElementById("head1").style.backgroundColor = "yellow"; 

//or this one? 
document.getElementById("head1").style.background = "yellow"; 

</script> 

</body> 
</html>

來源

2015-05-08 Rasan Samarasinghe

研究：http://stackoverflow.com/questions/19943118/difference-between-body-style-backgroundcolor-and-window-getcomputedstylebody – developerCK

謝謝你的評論。 –

獲取的元素，然後用.style屬性與.backgroundColor屬性一起去改變它：

function foo(){ 
 
    document.getElementById("head1").style.backgroundColor = "yellow"; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Demo page</title> 
 
</head> 
 
<body> 
 

 
<h1 id="head1" style="background-color:red">This is a heading</h1> 
 
<button onclick="foo()">Click!</button> 
 

 
</body> 
 
</html>

因此，你的2 ^第二選項是正確的。

來源

2015-05-08 04:32:02 user1823

謝謝你的回答。 –

如果您使用CSS class而不是使用style，則有更好的方法。

function foo(){ 
 
    document.getElementById("head1").className = "newclass"; 
 
    }

h1{background:gold;} 
 
h1.newclass{background:green;}

<h1 id="head1">This is a heading</h1> 
 
<button onclick="foo()">Click!</button>

來源

2015-05-08 04:56:02

謝謝你的回答。 –

如果我的回答適合您的要求，那麼您可能會接受此答案。這更好，因爲我們在這裏使用類而不是內聯元素。 –

使用JavaScript HTML更改背景色的最佳方式DOM DOM

回答

相關問題