106 lines
3 KiB
JavaScript
106 lines
3 KiB
JavaScript
|
|
const sample = document.querySelector("#sample");
|
|
|
|
// I commented the following line out by putting '//' at the start of the line.
|
|
//console.log(document);
|
|
|
|
console.log('color = ', sample.style.color);
|
|
// set default color
|
|
if (!sample.style.color) {
|
|
var color;
|
|
// from https://stackoverflow.com/questions/46336002/how-to-get-computed-background-color-style-inherited-from-parent-element
|
|
var div = document.createElement("div");
|
|
document.head.appendChild(div);
|
|
var color = window.getComputedStyle(div).color;
|
|
document.head.removeChild(div);
|
|
sample.style.color = color;
|
|
}
|
|
|
|
// red, green, blue, yellow, black, white, or #ccc or #5ef21d
|
|
function changeColor(color) {
|
|
sample.style.color = color;
|
|
}
|
|
|
|
function changeWeight() {
|
|
let weight;
|
|
if (sample.style.fontWeight == 'bold') {
|
|
weight = 'normal';
|
|
} else {
|
|
weight = 'bold';
|
|
}
|
|
sample.style.fontWeight = weight;
|
|
}
|
|
|
|
// normal or small-caps
|
|
function changeVariant() {
|
|
let variant;
|
|
if (sample.style.fontVariant == 'small-caps') {
|
|
variant = 'normal';
|
|
} else {
|
|
variant = 'small-caps';
|
|
}
|
|
sample.style.fontVariant = variant;
|
|
}
|
|
|
|
// normal, italic, or oblique
|
|
function changeStyle() {
|
|
let style;
|
|
if (sample.style.fontStyle == 'italic') {
|
|
style = 'normal';
|
|
} else {
|
|
style = 'italic';
|
|
}
|
|
console.log('style = ', style);
|
|
sample.style.fontStyle = style;
|
|
}
|
|
|
|
// set text shadow
|
|
function changeToShadow() {
|
|
var color = sample.style.color;
|
|
var shadow;
|
|
console.log('found color ', sample);
|
|
// if we're already in shadow mode, reset color
|
|
var str = '0px 0px 5px';
|
|
// is shadow mode already on? If so disable it.
|
|
if (sample.getAttribute('text-shadow') && sample.getAttribute('text-shadow').includes(str)) {
|
|
shadow = sample.getAttribute('text-shadow');
|
|
console.log('shadow', shadow);
|
|
// replace the contents of str with nuthin' to get the color
|
|
color = shadow.replace(str,'');
|
|
console.log('got color ', color);
|
|
// return the color to its previous state
|
|
sample.style.color = color;
|
|
// remove shadow
|
|
sample.removeAttribute('text-shadow');
|
|
// otherwise enable shadow mode...
|
|
} else {
|
|
sample.style.textShadow = str + ' ' + color;
|
|
console.log('set textShadow to ', sample.style.textShadow);
|
|
sample.style.color = 'white';
|
|
}
|
|
}
|
|
|
|
|
|
// turn CSS on and off and change status text
|
|
function changeCSS() {
|
|
var indicator = document.getElementById('status');
|
|
var linkNode = null;
|
|
// do we already have the link in the DOM?
|
|
if (linkNode = document.getElementsByTagName('link')[0]) {
|
|
linkNode.parentNode.removeChild(linkNode);
|
|
// update the indicator
|
|
indicator.textContent = 'on';
|
|
} else {
|
|
var head = document.getElementsByTagName('HEAD')[0];
|
|
// Create new link Element
|
|
var link = document.createElement('link');
|
|
// set the attributes for link element
|
|
link.rel = 'stylesheet';
|
|
link.type = 'text/css';
|
|
link.href = 'css/style.css';
|
|
// Append link element to HTML head
|
|
head.appendChild(link);
|
|
// update the indicator
|
|
indicator.textContent = 'off';
|
|
}
|
|
}
|