有沒有辦法使用 Javascript 從特定選擇器中洗掉所有 CSS 樣式，而不從元素中洗掉選擇器本身？
問題是我想將自己的類添加到元素中以處理樣式，但該元素是由 WordPress 插件創建的，并且元素上已經有覆寫我的類。我無法洗掉原始類，因為它們也被用于 Javascript。
通常我會放棄并堅持!important課堂上的所有內容，如果沒有其他方法，我仍然可以這樣做，但是原始課程實際上已經定義了所有內容，處于多個偽狀態，所以我必須列出所有內容color:to border-bottom-right-radius:with !importantafter it (包括 on :focusand :hoverand all) 以覆寫所有原始樣式。
基本上我有這個：
<button class="original-class-1 original-class-2">Button</button>
<style>
.my-styles {
color: #fafafa;
background-color: #090909;
border: 1px solid;
}
.original-class-1 {
color: #000000;
background-color: #ffffff;
border-width: 1px;
border-style: solid;
...
...
etc-with-everything-but-the-kitchen-sink: killme;
}
.original-class-2 {
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
...
...
etc-with-even-more-stuff: why;
}
</style>
而且我要
<button class="original-class-1 original-class-2 my-styles">Button</button>
<style>
.my-styles {
color: #fafafa;
background-color: #090909;
border: 1px solid;
}
.original-class-1 {
}
.original-class-2 {
}
</style>
目前我有這樣的事情開始：
const buttons = document.querySelectorAll('.original-class-1');
for (const button of buttons ) {
button.style.removeAllProperties(); // Does something like this exist?
button.classList.add('my-styles');
}
需要明確的是，原始類是從外部樣式表中添加樣式的，我只是將它們放在<style>上面的標簽中以進行說明。
uj5u.com熱心網友回復：
在為該類呈現實際規則之前，您可以嘗試使用all: revert或all: initial在 CSS 中從自定義類的 CSS 規則中重置樣式。
這段代碼使用夸張的風格進行實驗，revert而不是initial（使用有效的方法），以使更改顯而易見。
.original-class-1 {
color: #000000;
background-color: limegreen;
border-width:7px;
border-style: solid;
/* plus more */
}
.original-class-1:hover {
border-style: dashed;
}
.original-class-2 {
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
/* plus more */
}
.my-styles, .my-styles:hover {
all: revert;
color: #fafafa;
background-color: #090909;
border: 3px solid red;
}<button class="original-class-1 original-class-2">Button</button>
<button class="original-class-1 original-class-2 my-styles">Button2</button>偽元素選擇器似乎沒有回應冒號后的通配符，例如為神話中的“”選擇器指定規則，因此選擇器的規則.my-style:*顯式重復。.my-style.my-style:hover
uj5u.com熱心網友回復：
用js重寫樣式表
這是一種非常規的方法，可能會產生無法預料的影響，但它使用 javascript 重寫相關樣式表，為所有選擇器留下空的規則集，除了您添加的選擇器（必須通過包含一些常量標簽作為名稱的一部分來識別，本例中的.my-前綴）。
樣式表是 html 元素，與任何其他元素一樣，可以使用 javascript 訪問和操作其內容。
您必須通過（向控制臺報告）提取的樣式元素集合中的每個元素進行一些探索性作業，以便專注于相關作業表。在這里，與片段工具樣式面板相關的集合很容易被發現是索引 [0]，因此在示例中使用它。
如果步驟不清楚，請發表評論，我將解釋每個部分的目的。
let styleSheetCollections = document.getElementsByTagName('style');
let stylesText = styleSheetCollections[0].innerHTML;
const stylesBlockArray = stylesText.split("{");
let keepNext = false;
for (let i=1; i<stylesBlockArray.length; i ) {
if (!keepNext) {
stylesBlockArray[i]=stylesBlockArray[i].slice(stylesBlockArray[i].indexOf("}")-1);
} // end if;
if (stylesBlockArray[i].indexOf("my-") > -1) {keepNext = true;} else {keepNext = false};
} // next block;
newInnerText = stylesBlockArray.join("{");
console.log(newInnerText);
// replace style sheet innerText
// styleSheetCollections[0].innerText = newInnerText;.original-class-1 {
color: #000000;
background-color: #ffffff;
border-width: 1px;
border-style: solid;
...
...
etc-with-everything-but-the-kitchen-sink: killme;
}
.my-p_style {
font-size: 12px;
border: 0;
}
.my-h1_style {
font-size: 22px;
background: yellow;
}
.original-class-2 {
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
...
...
etc-with-even-more-stuff: why;
}
.my-styles {
color: #fafafa;
background-color: #090909;
border: 1px solid;
}uj5u.com熱心網友回復：
使用回傳 CSSStyleDeclaration 物件的 Window.getComputedStyle()，您可以簡單地迭代鍵/值對，將所有設定為“初始”。
const button = document.querySelector("button");
const element = document.getElementsByClassName("myclass")[0];
const cssObj = window.getComputedStyle(element);
button.addEventListener('click', function(e) {
for (x in cssObj) {
cssObjProp = cssObj.item(x)
let val = cssObj.getPropertyValue(cssObjProp);
element.style.setProperty(val, "initial");
}
});.myclass {
font-size: xxx-large;
color: red;
}<p class=myclass>Testing one two.</p>
<button>Fire JavaScript</button>uj5u.com熱心網友回復：
提供的示例中的按鈕元素使用類設定樣式，而不是元素的“樣式”屬性。由于按鈕元素是使用類設定樣式的，因此您可以嘗試修改按鈕上的“類”屬性。
window.onload = () => {
const buttons = document.querySelectorAll('.original-class-1');
buttons.forEach(button => button.setAttribute('class', 'my-styles'));
}.original-class-1 {
color: #000000;
background-color: red;
border-width: 1px;
border-style: solid;
}
.original-class-2 {
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
.my-styles {
color: #fafafa;
background-color: #090909;
border: 1px solid;
}<button class="original-class-1 original-class-2">Button</button>正如您在此處看到的，按鈕元素現在具有您的 .my 樣式，并且沒有任何原始類。
我不熟悉 WordPress，這可能是通過他們的工具而不是以這種方式操縱你的 DOM 更好的方法。祝你好運。
參考：Element.setAttribute()
編輯：如果你想變得很老套，你總是可以做一些有趣的事情，如下所示：（我不建議你這樣做:-)）
window.onload = () => {
const targetClass = Object.values(document.styleSheets[0].cssRules).find((rule) => rule.selectorText == '.very-red');
if (targetClass) {
Object.values(targetClass.style).forEach((property) => targetClass.style.removeProperty(property));
};
}.very-red {
color: #000000;
background-color: red;
}<button class="very-red">Very Not Red Button</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/530266.html