如何使用值的樣式跨度

-2

我想要樣式跨度的值，我想要文本「黃色」設置爲黃色;和「紅」顏色爲紅色;這裏的示例代碼：如何使用值的樣式跨度

<ul class="color"> 
 
    <li class="all-color"> <span data-vc-grid-filter-value=".vc_grid-term-1">yellow</span> 
 

 
    </li> 
 
    <li class="all-color"> <span data-vc-grid-filter-value=".vc_grid-term-2">red</span> 
 

 
    </li> 
 
</ul>

來源

2015-11-20 colorman

你可以使用html數據屬性嗎？ – Alex

有什麼特別的？我不知道你想要什麼，但我可以幫你用基本的造型... –

span[data-vc-grid-filter-value=".vc_grid-term-1"] { 
 
    display: block; 
 
    color: red; 
 
}

同樣可以選擇其他的跨度。按照每個問題，您想要按值選擇跨度。

來源

2015-11-20 11:45:41 Optimus

顯示屬性必須設置爲應用垂直填充或邊距span.Just告訴如果你以後需要它 – Optimus

這正是我所需要的，所有完成與CSS只，它的工作！謝謝.. – colorman

爲了實現這一目標，你得把兩個班作爲red & yellow然後分配上span領域的類。在CSS中，您必須爲字段設置color屬性。

檢查代碼在這裏：

.red{ 
 
color:red 
 
    } 
 

 
.yellow{ 
 
color:yellow 
 
    }

<ul class="color"> 
 
    <li class="all-color"> <span data-vc-grid-filter-value=".vc_grid-term-1" class="yellow">yellow</span> 
 

 
    </li> 
 
    <li class="all-color"> <span data-vc-grid-filter-value=".vc_grid-term-2" class="red">red</span> 
 

 
    </li> 
 
</ul> 
 

 
<!-- begin snippet: js hide: false -->

來源

2015-11-20 11:41:31

請再次閱讀問題。 – Alex

我看過問題。你想在黃色字體顏色黃色文字和紅色字體顏色紅色？ –

我知道，jQuery有不在這個問題被提及，但是這是你使用，你可以的情況下，做了什麼它：

$(".all-color").each(function() { 
    $(this).css("color", $(this).text()); 
});

Here is the JSFiddle demo

代碼修改根據你把顏色名稱的文本顏色有:)

來源

2015-11-20 11:43:16

不錯，但是瀏覽器的非定義顏色呢？似乎它有一些顏色限制。 –

@AdamAzad我的確同意你的觀點，但的確有其侷限性。但按照問題，它應該基於你所說的顏色名稱。這是最簡單的我想出了:) –

如何使用值的樣式跨度

回答

相關問題