When I perform Scroll down action on your site. Following error is printed on the console :
(index):200 Uncaught SyntaxError: Invalid or unexpected token
For the statement below :
$(header#main-header).css('background-color', 'red');
Now when I tried doing this using just JS it works fine. Just open the console and try it out.
document.getElementById("main-header").setAttribute("style","background-color:red");
When I perform Scroll down action on your site. Following error is printed on the console :
(index):200 Uncaught SyntaxError: Invalid or unexpected token
For the statement below :
$(header#main-header).css('background-color', 'red');
Now when I tried doing this using just JS it works fine. Just open the console and try it out.
document.getElementById("main-header").setAttribute("style","background-color:red");
1] Use "jQuery" instead of "$"
2] Put quotes around your selector (as you have it in example above, but not on site)
Videos
In addition to other answers, if you want to use the dash notition for style properties, you can also use:
document.getElementById("xyz").style["padding-top"] = "10px";
[edit 2023] Very old answer. For who it may concern: I created a small library to change styling dynamically @Codeberg.
It's almost correct.
Since the - is a javascript operator, you can't really have that in property names. If you were setting, border or something single-worded like that instead, your code would work just fine.
However, the thing you need to remember for padding-top, and for any hyphenated attribute name, is that in javascript, you remove the hyphen, and make the next letter uppercase, so in your case that'd be paddingTop.
There are some other exceptions. JavaScript has some reserved words, so you can't set float like that, for instance. Instead, in some browsers you need to use cssFloat and in others styleFloat. It is for discrepancies like this that it is recommended that you use a framework such as jQuery, that handles browser incompatibilities for you...
nFilter.style.width = '330px';
nFilter.style.float = 'left';
This should add an inline style to the element.
Most CSS names are mapped 1:1 to the JavaScript property. CSS properties with dashes in their names are converted to camel case. For more information see the blue information box at https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
You can do it directly on the style:
var nFilter = document.createElement('div');
nFilter.className = 'well';
nFilter.innerHTML = '<label>'+sSearchStr+'</label>';
// Css styling
nFilter.style.width = "330px";
nFilter.style.float = "left";
// or
nFilter.setAttribute("style", "width:330px;float:left;");
You could use style property
document.getElementById("header").style.backgroundColor = 'red';
You can change your approach a little:
function changeHeader(Index) {
var headers = [
{color: 'red', text: "Coffee tables"},
{color: 'blue', text: "Side tables",
{color: '#DDD', text: "Stand tables"},
{color: "#ACD12A", text: "Dinner tables"},
{color: "Chuck Norris", text: "Stools"}
];
var header = document.getElementById("header"),
header.innerHTML = headers[Index].text;
header.style.backgroundColor = headers[Index].color;
}
Setting the style attribute like that, overwrites the attribute and removes previously set styles.
What you really should do is set the styles directly instead by changing the style property :
function checkNr(id) {
var elem = document.getElementById(id),
value = elem.value;
if (parseFloat(value) == NaN) {
elem.style.border = '2px solid red';
elem.style.backgroundColor = 'rgb(255, 125, 115)';
} else {
elem.style.border = 'none';
elem.style.backgroundColor = 'rgb(255, 255, 255)';
}
}
function checkNr(id) {
var elem = document.getElementById(id);
var css = {};
if (parseFloat(elem.value) == NaN) {
css = { border: '2px solid red', backgroundColor: 'rgb(255, 125, 115)' };
} else {
css = { border: 'none', backgroundColor: 'rgb(255, 255, 255)' };
}
Object.assign(elem.style, css);
}
