jQuery $(). Css ("content") IE9

Question

dizgisini döndürüyor CSS content özniteliğimi kullanıyorum LESS stil sayfamdan JavaScript'e bazı değerleri aktarmak için (LESS in Canvas'da tanımlanan bazı renkleri kullanmak için) elementler). Hayatımı kolaylaştırmak için, bu değerleri JavaScript'te ayrıştırmak için kolay bir şekilde yerleştirmeye karar verdim.

AZ kodu:

div#colorChart-critical6 { 
    content: '#ff0000,#ff7200,#fffc00,#0000ff,#a200ff,#00ff00'; 
} 

Sonra jQuery kullanarak bunları okumaya çalışın:

$("div#colorChart-critical").css("content").split(","); 

sorunun olmasıdır

div#colorChart-critical { 
    content:'@{critical-highest},@{critical-veryhigh},@{critical-high},@{critical-low},@{critical-medium},@{critical-verylow}'; 
} 

derlenen aşağıdaki CSS getiriyor $("div#colorChart-critical").css("content") numaralı çağrıyı yapan IE9, bir nedenle "normal" dizesini döndürüyor. Opera, Firefox, Safari ve Chrome iyi çalışıyor.

Bu neden IE9'da oluyor?

IE9'da bu sorunla ilgili herhangi bir sorun mu var? Başka bir CSS niteliği yoksa, rastgele metinler koyabilir miyim?

ben gibi bir şey kullanabilirsiniz:

background: url(#ff0000,#ff7200,#fffc00,#0000ff,#a200ff,#00ff00); 

Ama bu konsolda hataları oluşturacaktır.

Answer 1

BoltClock yanıtı, sorunların nedenini gösterir. İçerik CSS özelliği yerine yazı tipi ailesini kullanarak bir iş buldum.CSS içine derlenmiş

div#colorChart-maincolors { 
    font-family: '@{colorChart1},@{colorChart2},@{colorChart3},@{colorChart4},@{colorChart5},@{colorChart6}'; 
} 

verir:

div#colorChart-maincolors { 
    font-family: '#c0392b,#2980b9,#2ecc71,#f1c40f,#ecf0f1,#34495e'; 
} 

dize elde edilebilir kullanarak:

My AZ kod

removeQuotes= function(string) { 
    return string.replace(/^['"]+|\s+|\\|(;\s?})+|['"]$/g, ''); 
}; 
removeQuotes($("#colorChart-maincolors").css("font-family")); //add a .split(',') to get the colors as an array 

fonksiyon removeQuotes gereklidir her tarayıcı çünkü getComputedStyle'ın dönüşüne farklı bir tırnak işareti ekler (ve buna ek olarak jQuer y .css() yöntemi). IE9 çift alıntı ekler, Webkit tek bir teklif ekler.

Daha fazla bilgi için bu makaleyi CSS numaralarını inceleyin: http://css-tricks.com/making-sass-talk-to-javascript-with-json/.

Answer 2

Bu, CSS2.1'de tanımlandığı gibi content öğelerinde değil, yalnızca :before ve :after sözde öğelerinde çalışmadığı için. IE9, buradaki CSS2.1 spesifikasyonlarını takip ederek, mandates'un content öğelerinde normal olarak hesaplanmasını sağlar.

Diğer tarayıcıların, özellikle de .css() makes use of getComputedStyle() on those browsers'u göz önünde bulundurarak, tanımladığınız değeri neden döndürdüğünü bilmiyorum. CSS2.1 content'u uyguluyorlarsa, bu değeri normal olarak hesaplamamakla CSS2.1'i ihlal ediyorlar. Geç bir CSS3 uygulaması için hazırlanıyorlarsa, her ne olursa olsun, o zaman onları gerçek öğeler üzerinde bir şekilde uyguladıkları mantıklı olacaktır.

Beni başka bir noktaya getiren: Eğer bir öğenin içeriğini değiştirmek için CSS kullanmaya çalışmıyorsanız, elemanlarla kullanım için tanımlanmamış olsa bile, content'u kullanmayın. Bu tekniği ilk etapta kullanıyorsunuz. Bu renkleri belirli sınıflara atamayı, gizli bir öğe oluşturmayı ve bu öğenin renk stillerini sorgulamayı deneyebilirsiniz.

Answer 3

Eğer dizesinden ekstra tırnak kaldırmak için replace(/["']/g, "") kullanabilirsiniz

""string"""string"