CSS is done with external, embedded or inline styles, right? Well JavaScript can do it for you, as we have already seen in action. In some cases this is preferable. Read on.
p {
font-family: sans-serif;
font-size: 1.3em;
}
.test1 {
color: green;
font-family: serif;
}
#thisId {
font-family: monospace;
}
'use strict';
let go = function () {
let arr = document.getElementsByTagName('p');
arr[3].style.fontFamily = 'serif';
for (let i = 0; i < arr.length; i++) {
console.log(i + ': ' + arr[i].style.fontFamily + ', ' + arr[i].style.color);
}
let d = $('divI');
d.style.backgroundColor = 'yellow';
let dd = $('divI');
dd.setAttribute('style', 'font-style: oblique;');
}
window.addEventListener('load', go);
<!doctype html>
<html>
<head>
<meta charset='utf-8'/>
<link rel='stylesheet' href='js91.css'/>
<style>
p { color: darkblue; }
</style>
<script src='nQuery.js'></script>
<script src='js91.js'></script>
</head>
<body>
<h1>CSS and JavaScript</h1>
<p style='font-family: monospace;'>
The first paragraph of the document.
</p>
<p class='test1'>
The second paragraph of the document.
</p>
<p id='thisId'>
The third paragraph of the document.
</p>
<p style='background-color: silver; color: #006;'>
The fourth paragraph of the document.
</p>
<div id='divI'>
This text is inside a div, not in a
paragraph.
</div>
</body>
</html>
This example demonstrates that every element in an HTML5 document has a style property in its DOM node. It also proves another thing. The values of the selectors of this are only visible to JavaScript when defined explicitly by an inline style, or by JavaScript code itself. It is not enough to have it defined in an external stylesheet or an embedded style element.
There's a catch of course. Style properties have names
that use hyphens as part of name, font-family, or text-align for example. This
will of course not work in JavaScript. The hyphen would
be interpreted as a minus. Therefore the DOM names
of all such style properties have been changed to
use camel-casing. The style property font-family
will be the DOM style property fontFamily,
the style property text-align
will be the DOM style property textAlign,
etc.
There are two ways of setting style information by JavaScript
let d = document.getElementById('divI');
d.style.backgroundColor = 'yellow';Or
let dd = document.getElementById('divI');
dd.setAttribute('style', 'font-style: oblique;');Again there's a catch. The latter of the two will overwrite the former. It is recommended to use the former to preserve the cascading nature of styles.
In this day and age it should be said that nine times of of ten, CSS should be done with styling tools of CSS. specially now that CSS3 gives extended dynamic possibilitis to CSS. In the remaining 10% of the cases, you may achieve just the right dynamics with letting JavaScript have a go at adjusting, or indeed creating the styling.