disabled = true可以在<style>上動態設置。爲什麼不靜態？

要禁用<style>塊，所有瀏覽器都允許設置document.styleSheets[x].disabled = true。但是，只有IE允許將該屬性設置在標籤本身上，<style disabled="true">。在其他瀏覽器中是否有解決方法？看起來很奇怪，動態完成的事情也不能靜態完成。disabled = true可以在<style>上動態設置。爲什麼不靜態？

來源

2011-04-22 Lucent

它認爲'真'可能是'disabled'屬性值無效。嘗試'disabled =「disabled」' – 2011-04-22 15:55:43

在樣式標籤上添加一個onload事件：''onload =「this.disabled = true」'' – 2017-03-04 11:17:45

要靜態地做，只需刪除樣式標籤。

作爲一種替代方法，您可以從DOM中刪除樣式節點，然後重新插入它以重新啓用它。

來源

2011-04-22 15:54:55 cdeszaq

如果您想稍後動態添加它，該怎麼辦？ – 2011-04-22 15:56:18

@Peter玉米，但它不再是靜態的嗎？ – cdeszaq 2011-04-22 15:57:07

我確定這裏的用例是以靜態禁用的樣式開始的，但可以稍後動態啓用它們。 – 2011-04-22 16:46:05

style元素沒有名爲disabled的有效屬性。從the HTML spec：

<!ELEMENT STYLE - - %StyleSheet  -- style info --> 
<!ATTLIST STYLE 
    %i18n;        -- lang, dir, for use with title -- 
    type  %ContentType; #REQUIRED -- content type of style language -- 
    media  %MediaDesc; #IMPLIED -- designed for use with these media -- 
    title  %Text;   #IMPLIED -- advisory title -- 
    >

然而，HTMLStyleElement DOM接口確實有這樣的屬性。從the DOM spec：

interface HTMLStyleElement : HTMLElement { 
      attribute boolean   disabled; 
      attribute DOMString  media; 
      attribute DOMString  type; 
};

不要混淆它在DOM對應的HTML元素。這並不是「奇怪的是，動態完成的事情也不能靜態完成。」 HTML和DOM規範是爲了解決不同的問題而創建的。 HTML是一種標記語言。 DOM是用於表示文檔中的對象並與其交互的約定。

來源

2011-04-22 16:00:18

那麼沒有解決方法？ IE做什麼是合理的，而其他人都盲目地遵循標準。 – Lucent 2011-04-22 16:28:28

@Lucent - 我不同意你的描述。 IE不必要地偏離標準，而其他人都做了合理的事情（即遵循沒有明顯的和令人信服的理由的標準）。 DOM和HTML是分開的東西。你不應該混淆他們各自的標準。動態完成的動作不能被靜態地完成，這是不奇怪的，因爲這些標準是不同目的的不同標準。 – 2011-04-22 16:45:09

@Lucent - 不是真的。它主要是反過來的，因爲標準記錄了瀏覽器已經做了什麼，或者他們表示願意做什麼。他們願意做的是他們認爲用戶需求 - 這是用戶提供他們的收入來源。反過來，這取決於用戶能夠使用由網絡作者創建的網頁，在這種情況下，用戶或作者沒有足夠的需求來實現此功能，而不是他們可能實施的其他事情。 – Alohci 2011-04-22 16:50:42

一個簡單的選擇是使其具有與主樣式表集不同的標題。這會讓瀏覽器將其默認爲禁用。

來源

2011-04-22 18:28:24

如果[CSSOM部分5.2.5]（http://dev.w3.org/csswg/cssom/#examples）中的示例包含樣式元素的使用 – Alohci 2011-04-22 19:46:41

media屬性可以在HTML和Javascript中設置。我們的想法是設置media屬性，以便樣式標籤不適用於任何設備以禁用它。

我認爲將其設置爲media="bogus"或這樣的錯誤是有風險的，因爲瀏覽器可能會決定忽略謂詞並將樣式應用於所有媒體類型。幸運的是，設置一個像素的最大屏幕寬度是非常有效的，在我的書中與禁用樣式標籤幾乎相同。

var style = document.querySelector("#my-style"); 
 

 
document.querySelector("#btn-style").addEventListener("click",function() { 
 
    style.removeAttribute("media"); 
 
}); 
 

 
document.querySelector("#btn-unstyle").addEventListener("click",function() { 
 
    style.setAttribute("media", "max-width: 1px"); 
 
});

<style id="my-style" media="max-width: 1px"> 
 
    p { color: red } 
 
</style> 
 

 
<p>Styled if you click below.</p> 
 

 
<button id="btn-style">Style that p</button> 
 

 
<button id="btn-unstyle">Unstyle that p</button>

來源

2018-02-01 16:54:58

disabled = true可以在<style>上動態設置。爲什麼不靜態？

回答

相關問題