Değerine bağlı olarak bir CSS öğesini şekillendirin

% 0 ile% 200 arasında değişen yüzdelerin bir listesine sahibim.Değerine bağlı olarak bir CSS öğesini şekillendirin

Bu sayıları değerlerine göre şekillendirmenin bir yolu var mı, yani sayıları 0% -% 100 yeşil ve% 101> kırmızı olsun?

Lütfen unutmayın, bunun için HTML'ye erişimim yok, sadece CSS. peşin

sayesinde

Tom Perkins

Düzenleme:

Söz konusu HTML okur:

<td class="HtmlGridCell" colspan="5" align="Left"> </td> 
    <td class="HtmlGridCell" colspan="2" align="Left"><span class="progress" title="303%"><span class="indicator warning" style="width: 100%;"> </span></span></td>

Ve CSS okur:

@-moz-document url("https://customstudio.workflowmax.com/job/joblist.aspx") { 
.progress:after { 
content: attr(title); 
font-size: 14px; 
position: relative; 
left: 122px; 
top: -27px; 
float: left; 
color: #666; 
background-color: #efefef; 
-moz-border-radius: 4px; 
padding: 5px; 
border: 1px solid #cfcfcf; 
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
}

Umarım yardımcı olur.

kaynak

2011-03-02 Tom Perkins

sarılır sahip 200 küsur varyasyonlar için bir seçici, yapabiliriz? – Sarfraz

Kodunuzu size daha iyi yardım edebilmemiz için göstermelisiniz, aksi halde herhangi bir cevap sadece spekülasyon olacaktır. – Kyle

Kod yukarıda eklendi. –

Bir 0 099 gibi% başlamak yüzdeler <% 100 set olsaydı, sen attr ile başlar kullanabilir ve attr seçici eşittir. modern tarayıcılarda çalışır ve yani 7 +

.progress[title^=1], .progress[title^=2] { background: red; } /* Starts with 1 or 2*/ 
.progress[title^=0], .progress[title=100%], { background: green; } /* Starts with 0 or is 100% */

Alternatif oldukça uzun bahsediyorsun html elemanın ne tür

kaynak

2011-03-02 11:10:56 Blowsie

Gerçekten yararlı, teşekkürler! –

Sorun yok, attr seçiciler hakkında bazı yararlı bilgiler http://css-tricks.com/attribute-selectors/ – Blowsie

İlgili değerlerin değerlendirilmesi olduğundan, CSS ile yapılamaz.

Ancak, Javascript sizin aradığınız şeyi yapabilir.

kaynak

2011-03-02 10:09:45

Ayrıca şu anda sadece CSS kullanmanın bir ihtimal olmadığına inanmıyorum ... İki CSS sınıfını "yeşil" ve "kırmızı" (veya karşılık gelen) tanımlamayı ve JavaScript'te küçük bir değerlendirme yapmayı öneririm. PHP, elemanlara sınıfları atamak için ...

Üzgünüm, ama bu her türlü HTML'ye erişime ihtiyacı var.

kaynak

2011-03-02 10:13:14 poeschlorn

Bu, gerçekten seçmek istediğiniz HTML öğelerinin türüne ve yapısına bağlıdır. Herhangi bir semantik yapıya sahip olmayan sadece <span> veya <td> öğeleriniz varsa işe yaramaz.

Ancak, title, class gibi özelliklere sahipseniz, sth yapabilirsiniz. Böyle:

span[attributeName="attributeValue"] {color: #FF0000}

kaynak

2011-03-02 10:22:14 gunnarsson

Değerine bağlı olarak bir CSS öğesini şekillendirin

cevap

İlgili konular