Один из подходов, который может работать (в зависимости от сложности ваших таблиц стилей), заключается в обновлении пользовательского свойства CSS для обновления свойств, которые вы хотите изменить или отредактировать:
// defining the colours to be used (the approach taken in these
// code snippets allows for other values to be added to this
// Array to extend the number of colours/values used):
let cssStyles = ['blue', 'red'],
// defining the function (using Arrow syntax, since
// we don't need to use the 'this' object within):
modifyCSS = (styles) => {
// 'styles': the Array of colours passed into the function.
// here we find the root-element of the document:
let root = document.querySelector(':root'),
// we retrieve the current value of the '--colorValue'
// CSS property defined in that Node's CSS (if present):
current = root.style.getPropertyValue('--colorValue'),
// and, because this property-value is a String, we search
// the Array of colours to retrieve the index of the current
// colour:
index = styles.indexOf(current);
// here we update the '--colorValue' custom property to the
// property held in the next index of the Array; or to the
// value held at the Array's zeroth/first index:
root.style.setProperty('--colorValue', styles[++index % styles.length]);
}
// binding the function to the click event on the '#updatecss' button:
document.querySelector('#updatecss').addEventListener('click', (e) => modifyCSS(cssStyles) );
let cssStyles = ['blue', 'red'],
modifyCSS = (event, styles) => {
let root = document.querySelector(':root'),
current = root.style.getPropertyValue('--colorValue'),
index = styles.indexOf(current);
root.style.setProperty('--colorValue', styles[++index % styles.length]);
}
document.querySelector('#updatecss').addEventListener('click', (e) => modifyCSS(e, cssStyles) );
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
display: grid;
grid-template-columns: 40vw 40vw;
width: 80vw;
margin: auto;
grid-gap: 4px;
}
.wrapper>div {
color: var(--colorValue, black);
border: 2px solid currentColor;
grid-column: 1/-1;
}
<div class="wrapper">
<button id="updatecss">Switch CSS</button>
<div>element 1</div>
<div>element 2</div>
<div>element 3</div>
<div>element 4</div>
</div>
JS Fiddle demo .
Учитывая, что ваш вопрос требует новых таблиц стилей и, вероятно, является упрощеннымверсия ваших требований, может быть сложнее обновить пользовательские свойства CSS в соответствии с вашими потребностями.Однако мы можем использовать аналогичный подход с массивом имен таблиц стилей:
// CSS stylesheet filenames:
let stylesheets = ['blue.css', 'red.css'],
// named function, using Arrow syntax as above, to change
// the stylesheets:
modifyCSS = (sheets) => {
// finding the relevant <link> element:
let link = document.querySelector('.linkedResource'),
// finding the index of the last '/' character in
// the href property-value of the <link>; adding 1
// so that the last slash is included in the 'path'
// and not the 'file':
lastSlashIndex = link.href.lastIndexOf('/') + 1,
// here we find the substring of the href up to,
// and including, the last '/' character:
path = link.href.substring(0, lastSlashIndex),
// finding the filename (based on the assumption
// that the filename follows the last '/' character):
file = link.href.slice(lastSlashIndex),
// finding the index of the current filename in the
// Array of filenames:
currentSheetIndex = sheets.indexOf(file);
// updating the href of the <link> element to be equal
// to the concatenated value of the path and the
// filename held at the next, or first, index of the Array:
link.href = path + sheets[++currentSheetIndex % sheets.length];
};
document.querySelector('#updatecss').addEventListener('click', () => modifyCSS(stylesheets));
let stylesheets = ['blue.css', 'red.css'],
modifyCSS = (sheets) => {
let link = document.querySelector('.linkedResource'),
lastSlashIndex = link.href.lastIndexOf('/') + 1,
path = link.href.substring(0, lastSlashIndex),
file = link.href.slice(lastSlashIndex),
currentSheetIndex = sheets.indexOf(file);
link.href = path + sheets[++currentSheetIndex % sheets.length];
};
document.querySelector('#updatecss').addEventListener('click', () => modifyCSS(stylesheets));
*,
::before,
::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
display: grid;
grid-template-columns: 40vw 40vw;
width: 80vw;
margin: auto;
grid-gap: 4px;
}
.wrapper>div {
color: var(--colorValue, black);
border: 2px solid currentColor;
grid-column: 1/-1;
}
<link rel="stylesheet" href="https://www.davidrhysthomas.co.uk/linked/blue.css" class="linkedResource" />
<div class="wrapper">
<button id="updatecss">Switch CSS</button>
<div>element 1</div>
<div>element 2</div>
<div>element 3</div>
<div>element 4</div>
</div>
JS Fiddle demo .
Ссылки:
Библиография: