revision:
Inline styles are applied directly to the specific HTML element using the "style" attribute.
This is a paragraph to show style settings.
Hello World!
Hello World!
<div class="example" style="margin-left: 20vw;">
<p class="spec" style="margin-left: 1vw;" id="intro">This is a paragraph to show style settings.</p>
<p class="spec" style="margin-left: 1vw;" id="p1">Hello World!</p>
<p class="spec" style="margin-left: 1vw;" id="p2">Hello World!</p>
</div>
<script>
var element = document.getElementById("intro");
element.style.color = "blue";
element.style.fontSize = "1.5vw";
element.style.fontWeight = "bold";
document.getElementById("p2").style.color = "darkgreen";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
document.getElementById("p2").style.fontWeight = "bold";
</script>
styles applied on the HTML elements can be obtained using the "style" property.
This is another paragraph showing style settings.
<div class="example" style="margin-left: 20vw;">
<p class="spec" id="intro_2" style="color:red; font-size:1.15vw;margin-left: 1vw;">This is another paragraph showing style
settings.</p>
<p class="spec" style="margin-left: 2vw;" id="style01"></p>
<p class="spec" style="margin-left: 2vw;" id="style02"></p>
<p class="spec" style="margin-left: 2vw;" id="style03"></p>
<h3 id="myH3" style="color:red;margin-left:1vw;">my header</h3>
<button style="margin-left: 5vw;" onclick="color()">try it</button>
<p class="spec" style="margin-left:2vw; margin-top:0.5vw;" id="demo"></p>
</div>
<script>
var elem = document.getElementById("intro_2");
document.getElementById("style01").innerHTML = "style color is " + elem.style.color;
document.getElementById("style02").innerHTML = "font size is: " + elem.style.fontSize;
document.getElementById("style03").innerHTML = "font style is: " + elem.style.fontStyle;
function color() {
let xx = document.getElementById("myH3").style.color;
document.getElementById("demo").innerHTML = xx;
}
</script>
To get the values of all CSS properties that are actually used to render an element the window.getComputedStyle() method can be used.
This is a paragraph.
<div class="example" style=margin-left: 20vw;>
<p id="intro_3" class="spec" style="color:darkolivegreen; font-size:1.25vw; margin-left: 1vw;">This is a paragraph.</p>
<p class="spec" style="margin-left: 2vw;" id="style04"></p>
<p class="spec" style="margin-left: 2vw;" id="style05"></p>
<p class="spec" style="margin-left: 2vw;" id="style06"></p>
<p class="spec" style="margin-left: 2vw;" id="style07"></p>
</div>
<script>
var elem01 = document.getElementById("intro_3");
var styles = window.getComputedStyle(elem01);
document.getElementById("style04").innerHTML = "color is: " + styles.getPropertyValue("color");
document.getElementById("style05").innerHTML = "font-size is: " + styles.getPropertyValue("font-size");
document.getElementById("style06").innerHTML = "font-weight is: " + styles.getPropertyValue("font-weight");
document.getElementById("style07").innerHTML = "font-style is: " + styles.getPropertyValue("font-style");
</script>
To completely override the existing inline style, you set the cssText property of the style object.
This is a text as per the existing style.
This is the same text of which the existing style is overridden with "style.cssText=".
This is the same text of which the existing style is overridden with "setAttribute=".
This is the same text, but new CSS properties are concatinated to the "cssText", i.e. "+=" operator appends the new style string to the existing one.
<div class="example" style=margin-left: 10vw;>
<p id="intro_4" class="spec" style="color:darkolivegreen; font-size:1.25vw; margin-left: 1vw;">This is a text as per the
existing style.</p>
<p id="intro_5" class="spec" style="color:darkolivegreen; font-size:1.25vw; margin-left: 1vw;">This is the same text of which
the existing style is overridden with "style.cssText=".</p>
<p id="intro_6" class="spec" style="color:darkolivegreen; font-size:1.25vw; margin-left: 1vw;">This is the same text of which
the existing style is overridden with "setAttribute=".</p>
<p id="intro_7" class="spec" style="color:darkolivegreen; font-size:1.25vw; margin-left: 1vw;">This is the same text,
but new CSS properties are concatinated to the "cssText", i.e. "+=" operator appends the new style string to the existing
one.</p>
</div>
<script>
var elem02 = document.getElementById("intro_5");
elem02.style.cssText = 'color:red;background-color:yellow;margin-left:1vw;';
var elem03 = document.getElementById("intro_6");
elem03.setAttribute('style','color:blue;background-color:green;margin-left:1vw;');
var elem04 = document.getElementById("intro_7");
elem04.style.cssText = 'color:red;background-color:yellow;margin-left:1vw;';
elem04.style.cssText += "color: magenta; font-style:italic";
</script>
a css() helper function is used to set multiple styles for an element from an object of key-value pairs.
JavaScript setting style demo!
JavaScript setting style demo!
<div class="example">
<p id="content" class="spec" style="margin-left: 1vw;">JavaScript setting style demo!</p>
<p id="content-1" class="spec" style="margin-left: 1vw;">JavaScript setting style demo!</p>
</div>
<script>
let content = document.querySelector('#content-1');
content.style.color = 'red';
content.style.fontWeight = 'bold';
content.style.fontSize = '1.5vw';
</script>
change the style of the HTML element, when the user clicks a button.
Click the button to change the style/color of the H3 element.
<div class="example" style="margin-left: 20vw;">
<p class="spec"> change the style of the HTML element, when the user clicks a button.</p>
<h3 class="spec" id="id1"style="margin-left:1vw;">My Heading 3</h3>
<button type="button" style="margin-left:1vw;" onclick="document.getElementById('id1').style.color = 'red'">click me!</button>
<p class="spec" style="margin-left: 1vw;">Click the button to change the style/color of the H3 element.</p>
<h3 style="margin-left: 1vw;" id="H3">How to change the style of a header</h3>
<button style="margin-left: 1vw;" onclick="changeColor()">try it</button>
</div>
<script>
function changeColor() {
document.getElementById("H3").style.color = "red";
document.getElementById("H3").style.fontWeight = "normal";
document.getElementById("H3").style.fontStyle = "italic";
}
</script>
* {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
text to show that there is no difference
text to show that there is no difference
<div>
<p class="een spec">text to show that there is no difference</p>
<p class="twee spec">text to show that there is no difference</p>
</div>
<style>
.een {background: none; border: none; color: inherit; outline: none; padding: 0; }
/* better solution */
.twee {all: unset; }
</style>
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header,
hgroup, menu, nav, section, , time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
body {line-height: 1;}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {display: block;}
nav ul {list-style :none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
table {border-collapse: collapse; border-spacing: 0;}
input, select {vertical-align :middle;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header,
hgroup, menu, nav, section, , time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
body {line-height:1;}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {display:block;}
nav ul {list-style:none;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none;}
a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
/* change colours to suit your needs */
ins {background-color:#ff9; color:#000; text-decoration:none;}
/* change colours to suit your needs */
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;}
table { border-collapse:collapse; border-spacing:0;}
/* change border colour to suit your needs */
hr {display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
input, select {vertical-align:middle;}