屬性選擇器，JavaScript和IE8

我試圖使用屬性選擇器和CSS來格式化元素。屬性選擇器，JavaScript和IE8

的HTML看起來像：

<div id="user" highlight="false">User Name</div>

的CSS是：

[highlight=true] 
{ 
    background-color: red; 
} 

[highlight=false] 
{ 
    background-color: white; 
}

然後還有一些附帶的JavaScript：

if(foo) 
{ 
    node.setAttribute('highlight', true); 
} 
else 
{ 
    node.setAttribute('highlight', false); 
}

這在Firefox和Chrome。當突出顯示屬性被JavaScript更改時，元素的背景顏色會根據需要進行更改。然而，在IE8中，這是一個不同的故事。元素將根據最初在HTML中分配的高亮值正確顯示，但當屬性動態更改時，元素的顯示不會更改。

這是一個已知的怪癖，是否有一個已知的解決方法？

更新我剛剛將屬性名稱更改爲「frob」，其值爲「on」和「off」。這應該解決有關保留或可解釋的值的任何問題。

另一件值得注意的事情。當我打開IE8開發人員工具並使用HTML檢查器時，它會顯示樣式[frob = on]或[frob = off]，適用於啓動文檔檢查器時所使用的任何值。但是，frob屬性將不再在檢查器視圖中更改。在任何情況下，[frob = on/off] css中的值都不會在初始呈現HTML後應用。

更新：問題解決 解決方案是強制重繪。有很多種方法可以做到這一點，但似乎標準的做法是將className重新分配給自己。

來源

2010-01-21 Kennet Belenky

您在設置屬性爲JavaScript true和false，而不是字符串"true"和"false"。這可能被瀏覽器解釋爲1和0，並導致不需要的結果。

你可以嘗試

node.setAttribute('highlight', 'true');

？

來源

2010-01-21 20:51:16

更改JavaScript才能使用字符串形式並沒有辦法。謝謝，不過。 – 2010-01-21 20:57:21

好的。你還能嘗試一些不同於真或假的東西，只是爲了確保沒有任何解析起作用？它是否與'rel'這樣的已知有效屬性一起工作？ – 2010-01-21 21:00:24

您正在使用未知屬性hightlight。它是IE，所以它支持根據其名稱的屬性（似乎比支持每個屬性名稱更難，但它是IE）。

只需使用class="hightlight" - 易於實施和處理。

來源

2010-01-21 20:52:12 Crozin

我對這種方法並不滿意，因爲我已經將一個類應用於div（未在原始代碼示例中顯示）。將多個類應用於節點是一個不太理想的解決方案。當然，如果屬性選擇器需要特定於瀏覽器的解決方法，它將更加優雅。 – 2010-01-21 20:55:30

即使應用了多個類，使用class屬性也是一種方法。也許從你的角度來看它並不優雅，但它並不是特例。（單獨使用一個空格的2個類） – ZippyV 2010-01-21 21:04:35

我第二次使用類，因爲它們也將在不支持屬性選擇器的瀏覽器中工作。 – 2010-01-21 21:06:51

避免不可避免的跨瀏覽器兼容性問題的javascript/css我會推薦使用jQuery。

例如，要通過jQuery框架突出顯示一個元素，這就是所需要的一切......

$("div").click(function() { 
     $(this).effect("highlight", {}, 3000); 
});

來源

2010-01-21 21:00:47

請確保您有在頁面頂部定義DOCTYPE：Css attribute selector for input type="button" not working on IE7

來源

2010-09-23 14:54:44 Sofox

感謝您的提示。但是，我總是指定一個DOCTYPE。我的問題不是IE沒有評估選擇器，而是IE沒有觸發重新評估CSS屬性的改變。 – 2010-09-23 19:15:00

檢查以確保你在你的頁面的頂部定義的DOCTYPE：Css attribute selector for input type="button" not working on IE7

來源

2010-09-23 14:58:28 Sofox

屬性選擇器，JavaScript和IE8

回答

相關問題