如何將樣式注入IE8？

// create a style element 
$("#main").html('<style id="custom_persona_css"></style>'); 

$("#custom_persona_css").append('#abc{ color:#000000; }');

正如你所看到的，這在IE8中不起作用！如何將樣式注入IE8？

我該如何讓它在IE8中工作？

將會有一個錯誤信息：「意外的調用方法或屬性訪問」，因爲IE8不承認HTML作爲有效（ABC部分）

來源

2012-01-29 TIMEX

在MSIE設置相關<style/> - 元素樣式表對象的cssText屬性：

$('<style id="custom_persona_css"></style>').appendTo('head'); 

    if($.browser.msie) 
    { 
    $("#custom_persona_css").prop('styleSheet').cssText='#abc{ color:#000000; }'; 
    } 
    else 
    { 
    $("#custom_persona_css").append('#abc{ color:#000000; }'); 
    }

http://jsfiddle.net/doktormolle/BLJUv/

來源

2012-01-29 03:28:33

+1 - 我會爲未來收拾好的小塊金。 – mrtsherman 2012-01-29 04:04:11

分數。我不知道爲什麼人們沒有一直投票。這是100％符合我的需求。謝謝！ – TIMEX 2012-01-29 09:29:38

你使用jQuery和jQuery有一個巨大的圖書館用於動態改變元素的樣式的方法：

$(selector).css(propertyName, value); 

$(selector).propertyName(value);

以上只是兩個的jQuery的使用方法的實施例來影響由選擇器識別元素的元素或基團的樣式。

因此，要改變使用id =「ABC」的元素的顏色，下面的工作：

$('#abc').css('color','#000000');

此外，如果你正在尋找的主題元素的一個或一組，你可以創建一個style.css文件來概述不同classNames的樣式。

的style.css：

.custom_persona { 
    color:#000000; 
} 

.some_other_custom_style { 
    color:red; 
    background-color: #fff; 
}

index.html的腳本：

$('#abc').addClass('custom_persona'); 

// OR 

$('#abc').addClass('.some_other_custom_style'); 
$('#abc').removeClass('custom_persona');

然後，你可以簡單地通過添加或刪除的類名的元素（一個或多個），像這樣應用的樣式

jQuery CSS category of methods and properties根據可用的屬性更詳細地介紹。這不僅可以解決您的IE8問題，而且還可以在所有其他主流瀏覽器中使用。

來源

2012-01-29 02:39:09 jmort253

我不能這樣做。因爲用戶定義了規則，並且我應用了它們。它們並不是一成不變的。 – TIMEX 2012-01-29 02:54:41

你是什麼意思用戶定義樣式？即使用戶正在定義樣式，您仍然應該能夠使用上述技術之一來應用它們。現在，我還沒有嘗試過這種方法，但是您可以嘗試將這些用戶提供的樣式動態生成爲動態CSS文件，並將它們附加到HEAD部分'var i = $（'link'）。attr（「href」，「 /userGenerated.php?userId=555「）; $（'head'）。appendChild（i）;'在這種情況下，userGenerated.php從文件或數據庫中提取樣式。 – jmort253 2012-01-29 03:09:07

我同意jmort253，也許直接修改樣式屬性，或加載一個CSS文件是最好的。然後，您可以使用更高效的addClass和removeClass方法。這就是說，風格元素應該在腦海中（當然，它們在身體中工作，但我不記得支持officially）。所以你可以爲此做這樣的事情。

http://jsfiddle.net/TCUxx/1

$('head').append('<style type="text/css">#abc{ color:#ff0000; }</style>');

更新 - 由於某種原因，這是行不通的。我不知道爲什麼。適用於IE9。

var $styleElement = $('<style />', { 
    type: 'text/css', 
    text: '#abc{ color:#ff0000; }' 
}); 

$('head').append($styleElement);

來源

2012-01-29 02:43:21 mrtsherman

+1正是我在想什麼。感謝您的驗證！ – jmort253 2012-01-29 03:11:06

@mrtsherman：這是否在你的IE8中工作？ – 2012-01-29 03:35:51

@ Dr.Molle - 實際上沒有。不，它不。我不知道爲什麼。如果你只是輸入它的代碼（更改我的答案）。我試着按照你的答案中的建議設置cssText，但它不起作用。 – mrtsherman 2012-01-29 04:13:41

這是否工作：

var $style = $("#custom_persona_css"); 

$style.html(
    $style.html() + '#abc{ color:#000000; }' 
);

或者

$("#custom_persona_css")[0].innerHTML += '#abc{ color:#000000; }'

來源

2012-01-29 03:01:10 qwertymk

如何將樣式注入IE8？

回答

相關問題