I'm creating a tool for people with disabilities to help them access the site. One of the many functions the tool has is to change colour: text, headings, background.
What have I now?
When a user changes colour tool search for elements:
for(let i = 0, elements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'strong']; i < elements.length; i++) {
documeny.querySelector(elements[i]).style.color = color;
}
But I know it will be slow if there are a lot of elements with a specific tag on the page. I want to dynamically create a block and save the css properties.
Note: E.g. h1 will have more than one css property, e.g. color and letter-spacing.
What I want to do?
I want to create e.g.
<style>
h1 {
color: #000;
letter-spacing: 0.5px;
}
</style>
And when the user removes the letter spacing property, it removes it from the block and leaves the colour.
How I see it and what I need?
I will create one block for all CSS changes, and then add to this block properties:
let c = document.createDocumentFragment();
let e = document.createElement("style");
e.id = 'toolbox-styles';
c.appendChild(e);
document.head.appendChild(c);
// Then
document.getElementById('toolbox-styles').innerCSS.h1.letterSpacing = ''; // I know it doesn't exist, but It's more less what I think i need)
Where I need help?
I don't know how:
Add new CSS for e.g. h1 to existing one (in the block);
Remove only one property from e.g. h1 CSS
Create new css for e.g. h2 in block with css for h1:
<style>
h1 {
letter-spacing: 0.5px;
color: red;
}
h2 { // Another element
color: blue;
}
</style>
You can use css variables to modify styling changes to your code with js.
You have getPropertyValue and setProperty to use for this purpose.
Just add some variables in your stylesheet to :root and modify it with setProperty.
Please see these Links for further infos:
CSSStyleDeclaration.setProperty()
CSSStyleDeclaration.getPropertyValue()
// Get the root element
var r = document.querySelector(':root');
// Create a function for setting a variable value
function setColor() {
// Set the value of variable --blue to another value (in this case "lightblue")
r.style.setProperty('--blue', 'lightblue');
}:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
.container button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}<html>
<body>
<div class="container">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
<button>Yes</button>
<button>No</button>
</div>
<br/>
<button type="button" onclick="setColor()">Change CSS Variables</button>
</body>
</html>