0
document.body.style.backgroundColor="#F00";

This statement styles the body background color as red.

In my original code I have a function that assigns elements by tag name to a global variable element. I've found after calling this function I can do this: element.style.backgroundColor="#F00";

However, there doesn't seem to be ANY way to substitute for the property section of the statement. Below I've produced the most obvious approach, though I have also tried assigning the parameters to variables and various combinations of quotation.

function assignStyle(value) {
  document.body.style.backgroundColor = value;
}

function attemptStyle(property,value) {
  document.body.style.property = value;
}
button { font-family: monospace; }
<button onmouseover="assignStyle('#131519');" onmouseout="assignStyle('#FFF');">
  function assignStyle(value){}
</button><br />

<button onmouseover="attemptStyle('backgroundColor','#137619');" onmouseout="attemptStyle('backgroundColor','#FFF');">
function attemptStyle(property,value){}
</button>

Edit: This question is not a duplicate of How do I add a property to a JavaScript object using a variable as the name?. That question contains jQuery, which many people, including myself, know literally nothing about. My question is concerned with basic JavaScript. Also, I want to know how to add a property to an element, and so by means of passing an argument to a function parameter. As far as I'm concerned, variables complicate the question further.

Community
  • 1
  • 1
Musixauce3000
  • 549
  • 1
  • 3
  • 11

2 Answers2

6

I'm not too certain of what you mean by "substituting" backgroundColor, but I'll wager a guess that you're trying to access the backgroundColor property programmatically. If so, your second function needs the following amendment:

function attemptStyle(property,value){
  document.body.style[property]=value;
}

Thus, if you call attemptStyle('backgroundColor', 'red'), you will make the background color of the document red.

sg.cc
  • 1,726
  • 19
  • 41
  • So brackets then... like accessing an iteration or index. Is that what's happening there? I noticed there is no period between style and property. – Musixauce3000 Jan 31 '16 at 03:01
  • 2
    Correct. Square brackets can either be used to access an element in an array, or a property of an object. You could even do things like `someObject[prop1][prop2][prop3]` to go 3 levels deep. – sg.cc Jan 31 '16 at 03:02
1

This may not answer your question, but can fix your problem. You are trying to change colors when the mouse is over an element. This can be done simply with CSS

<style>
button {
    background-color:#fff;
}

button:hover {
    background-color: #131519
}
</style>

<button>
function assignStyle(value){}
</button><br />

<button>
function attemptStyle(param,value){}
</button>
Ibu
  • 42,752
  • 13
  • 76
  • 103
  • The mouse over thing was just so I didn't need to add a reset button to the snippet. The question was intended to explain that I needed a way to change the property target of a line of JavaScript instruction inside a function – Musixauce3000 Jan 31 '16 at 03:08