設置內部樣式或操作內部樣式的正確方法<style> sheet with JavaScript/jQuery

Question

假設我有這個外部的“ style.css”表：

p.class1 {
    background-color: blue;
}

我的HTML內容是這樣的：

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <style>
        p.class1 {
            background-color: red;
        }
        p.class2 {
            background-color: green;
        }
    </style>
</head>
<body>
    <p class="class1">This is the first paragraph..</p>
    <p class="class2">This is the second paragraph..</p>
</body>

有關完整的源代碼示例，請訪問此鏈接！ 當我嘗試此.css()代碼時：

$('p.class1').css("background-color", "green");

它將設置p.class1的background-color內聯，例如：

<p class="class1" style="background-color: rgb(0, 255, 0);">

當我使用.css("background-color", "")取消設置時，內聯樣式將消失，背景將在內部重新設置為red 。 我想要的是將內部p.class1樣式設置為""或者在取消設置時將其刪除，因此背景在外部將變為blue 。是否有正確的方法來處理內部<style> ？

請注意，如果它也會影響p.class2的樣式或任何會影響該元素中其他樣式的嘗試，則我不想刪除內部的<style>元素以執行外部p.class1樣式。

Answer 1

可以，但是您將需要使用CSSOM來處理樣式表。 從本質上講，這並不是jQuery，盡管jQuery在最初階段可以提供幫助。

第一步是進入DOM中的內部<style>元素 。 最簡單的方法是在HTML中為其設置id屬性，然后使用document.getElementById()來獲取JavaScript端的元素，但是任何可以挑選出該單獨元素的方法都可以使用。 假設您使用id ，則HTML可能如下所示：

<style id="internalStylesheet">
    p.class1 {
        background-color: red;
    }
    p.class2 {
        background-color: green;
    }
</style>

...然后在JavaScript方面...

var styleElem = document.getElementById('internalStylesheet');

請注意，如果使用jQuery來執行此操作，則需要實際的元素， 而不是 jQuery()返回的jQuery集合。

有了元素后，就可以通過其.styleSheet屬性進入CSSOM端。 進入樣式表后， 下一步就是找到所需的確切規則 。 CSS規則不像DOM節點那樣具有唯一的ID，因此您唯一的選擇是搜索列表：

var desiredRule = null;
for (var i = 0; i < styleElem.styleSheet.cssRules.length; i += 1) {
    if (styleElem.styleSheet.cssRules[i].selectorText === "p.class1") {
        desiredRule = styleElem.styleSheet.cssRules[i];
        break;
    }
}

如果您需要多次更改，則保持引用您想要的規則是一個好主意。 這樣，您就不必每次想更改規則時都重復此搜索過程。

有了所需的規則后， 操作規則就非常類似於操作內聯樣式 。 為了實際刪除規則上的屬性，我建議類似以下內容：

desiredRule.removeProperty("background-color");

請注意，由於搜索列表效率低下， 因此不建議您執行此操作，除非該規則會影響頁面上的許多元素，並且該規則可能需要經常更改 。 如果適合您的用例，那么它會非常快，尤其是如果您保留對需要更改的規則的引用的緩存。 但這實際上並沒有描述許多常見的用例，而如果沒有，則很麻煩，可以將其稱為過早優化。

Answer 2

根據問題中的代碼，有沖突的外部CSS文件覆蓋內聯<style>元素而根本不更改HTML文件的唯一方法是在外部CSS文件中添加!important hack：

p.class1 {
    background-color: blue !important;
}

但這是一個hack，很不好，也不應該這樣做，因為使用!important時，您將丟棄CSS的“層疊”部分。 相反，您應該只刪除p.class1 { background-color: red; 從您的內聯<style>元素中，或將其值替換為blue ，因為您不希望使用red 。

相反，您應該在<style>元素之后加載外部樣式表。 這可以通過簡單地翻轉順序來完成：

<head>
    <style>
        p.class1 {
            background-color: red;
        }
        p.class2 {
            background-color: green;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

這將覆蓋<style>的p.class1的red值和CSS文件的p.class1的藍色值。

另外，如果在<p>元素周圍添加包裝器/容器元素，則可以將外部CSS文件設置為具有更具體的選擇器，該選擇器將覆蓋<style>元素中的次要選擇器。 就像是：

HTML：

<div class="wrapper">
    <p class="class1">This is the first paragraph..</p>
    <p class="class2">This is the second paragraph..</p>
</div>

CSS：

.wrapper p.class1 {
    background-color: blue;
}

由於選擇器.wrapper p.class1比內聯選擇器p.class1更具體，因此它通常會覆蓋內聯選擇器。

Answer 3

首先，外部樣式表和內部<style>標記之間沒有真正的區別。 稍后定義的那個將生效。 我假設您在<style>之前包含了CSS，所以CSS的這一部分將永遠無法使用：

p.class1 {
    background-color: blue;
}

其次，所有內聯樣式都將覆蓋任何CSS，因此您的jQuery .css()調用將始終有效。 將其設置為空字符串將刪除該內聯樣式屬性，因此它自然會退回到優先級較低的樣式表-在您的情況下，

<style>
p.class1 {
    background-color: red;
}
...
</style>

第三，沒有辦法動態地操作內部<style> 。 因此，如果希望在刪除內聯樣式后將p.class1恢復為藍色，則應該執行以下任一操作：

在<style>之后聲明您的<link href="external.css"> <style> ，這將取消您的p.class1內部樣式。 （然后提出了一個問題：您為什么要包括該屬性以使其隨后被取消？）

要么

只需使用CSS並避免使用內部樣式。

設置內部樣式或操作內部樣式的正確方法<style> sheet with JavaScript/jQuery

問題描述

3 個解決方案

解決方案1
2 已采納 2015-06-24 18:21:47

解決方案2
1 2015-06-24 16:29:41

解決方案3
0 2015-06-24 16:55:19

設置內部樣式或操作內部樣式的正確方法<style> sheet with JavaScript/jQuery

問題描述

3 個解決方案

解決方案1 2 已采納 2015-06-24 18:21:47

解決方案2 1 2015-06-24 16:29:41

解決方案3 0 2015-06-24 16:55:19

解決方案1
2 已采納 2015-06-24 18:21:47

解決方案2
1 2015-06-24 16:29:41

解決方案3
0 2015-06-24 16:55:19