是否可以使用純 js 動態修改 css :nth-child 屬性？
.tile:nth-child(10n 1) {
clear: both;
}
例如像這樣使用js添加的東西
uj5u.com熱心網友回復：
你可以用
document.querySelector()
uj5u.com熱心網友回復：
目前尚不清楚，您是要編輯選擇器還是規則的屬性。下面的代碼片段可以做到這兩點。
class Css {
addRule(selector, properties) {
const rule = this.styleSheet.insertRule(selector ' ' properties);
this[selector] = this.styleSheet.rules[rule];
return this[selector];
}
createStyleSheet() {
const styleElement = document.head.appendChild(document.createElement('style'));
this.styleSheet = document.styleSheets[document.styleSheets.length - 1];
return this;
}
}
const css = new Css().createStyleSheet(),
pNth = css.addRule('p:nth-child(1)', '{color: red; position: relative;}');
// A use-case showing how to use the stored rule
setInterval(_ => {
const index = Math.floor(Math.random() * 3) 1;
// Change selector via selectorText property
css['p:nth-child(1)'].selectorText = `p:nth-child(${index})`;
// Edit/add a property via style property
pNth.style.left = `${index}em`;
}, 500);<div>
<p>Text</p>
<p>Chapter</p>
<p>Paragraph</p>
</div>當一個檔案包含多個大型樣式表時，要找到一個正確的規則進行編輯既困難又費時。此外，大多數瀏覽器不允許您修改跨域樣式表。這些問題可以通過style在檔案的 head 部分創建一個行內元素并將新規則添加到該樣式表來解決。值得注意的是，行內樣式表規則具有更高的特異性，因此添加的規則可能會破壞計劃的級聯，認為它也可以確保編輯的規則也適用于檔案。
一個Css類的實體包含兩個方法。createStyleSheet創建一個新的樣式元素并將其附加到頭部，并回傳實體本身。addRule根據傳遞給它的引數向新創建的樣式表添加新規則。該方法還將對它創建的規則的參考存盤到由傳遞的選擇器命名的屬性中。最后，該方法回傳對新創建規則的參考。
當您需要添加規則時，您呼叫addRule方法。將回傳值存盤到變數中不是強制性的，您可以隨時參考使用css物件的規則和規則的原始選擇器來更改選擇器或規則的屬性。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/405662.html
標籤：