我目前正在做一些樣式並且想出了一個有趣的方式來做某件事。我想創建一段文字，在頁面上的其他文字中突出顯示。下面你可以看到我做到這一點的方式。在CSS值中使用類名稱

var el = document.querySelectorAll('span[class^=impact]')[0], 
 
    col = el.className.split('-')[1]; 
 

 
el.style.textShadow = '2px 2px 0 #' + col;

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    background-image: url('http://i.imgur.com/UxB7TDq.jpg'); 
 
} 
 
[class^=impact] { 
 
    position: fixed; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    
 
    font-family: Impact, sans-serif; 
 
    font-size: 72pt; 
 
    font-weight: 800; 
 
    text-transform: uppercase; 
 
}

<span class="impact-008080">impact</span>

正如你看到的我基本上得到類的前半部分和應用樣式，並抓住在JavaScript類的下半年和應用的影子呢。我想要做的就是完全省略JavaScript並將其全部保存在CSS中。

我沒有一個顏色列表。任何和所有的十六進制顏色顯然支持。我寧願保留這種格式。

來源

2014-09-25 Spedwards

您是否有預定義的顏色列表（第二部分）？ – Harry 2014-09-25 04:28:20

@哈利不，我應該提到這一點。我真的很想保持這種格式。 – Spedwards 2014-09-25 04:29:01

在這種情況下，我認爲這將是非常棘手（而不是忘記一個巨大的臃腫的文件）與CSS/Less做它。我對SASS並不多，但我也認爲它也適用於此。 – Harry 2014-09-25 04:31:59

CSS `attr`

從理論上說，這種類型的事情是什麼CSS attr屬性可以用來當瀏覽器支持存在。請注意，這不會現在的工作，但是當瀏覽器支持不存在，它可能是這個樣子：

HTML

<span class="impact" data-shadow="#008080">Impact</span>

CSS

.impact { 
    /* you text and positioning styles here */ 

    text-shadow: 2px 2px attr(data-shadow); 
}

你可以閱讀更多關於attr屬性在這裏： https://developer.mozilla.org/en-US/docs/Web/CSS/attr

但現在...

您最好的選擇可能是繼續在元數據屬性使用JavaScript，但而不是附加的十六進制代碼的類名，存儲的十六進制值，允許您保持該元素的所有實例的類名一致。

HTML

<span class="impact" data-shadow="#fff">Impact</span>

CSS

.impact { 
    /* your text and position styles here */ 
}

var el = document.querySelector(".impact"), 
    shadow = el.dataset.shadow; 

el.style.textShadow = '2px 2px ' + shadow;

這裏有一個的jsfiddle供參考：http://jsfiddle.net/galengidman/xx6r1n2o/

來源

2014-09-25 05:09:24

在CSS值中使用類名稱

回答

CSS attr

但現在...

相關問題

CSS `attr`