將CSS重複應用於特定單詞

我試圖將CSS反覆應用並自動應用於特定單詞。將CSS重複應用於特定單詞

例如，對於單詞「Twitter」，我希望文本的顏色爲＃00ACED。

目前我使用的跨類手動將圍繞特定的品牌而言這些顏色：

<span class="twitter">Twitter</span>

隨着CSS：

.twitter { 
    color: #00ACED; 
}

然而，這是一個過程，我希望能有一個方法從而自動完成此樣式。我有大約20個關聯顏色樣式的品牌詞。

任何人都可以幫助我解決這個問題。如果這有什麼不同，我使用WordPress。

來源

2013-10-04 jordanhuxley

使用JS來實現這一點。 –

從長遠來看，爲了給這些類加上前綴，你會更好。例如，「嘰嘰喳喳」而不是「嘰嘰喳喳」。否則，您可能在將來的造型上遇到問題。 –

@JamesDonnelly抱歉，我不太熟練的編碼網站，我更多地參與設計方面。你能以更簡單的方式解釋這個嗎？你將如何改變我在做什麼？ – jordanhuxley

這樣的事情可能會奏效。您必須循環搜索條件，這可能不是最有效的方法。

function add_class (search, replacement) { 
    var all = document.getElementsByTagName("*"); 
    for (var i=0, max=all.length; i < max; i++) { 
     var text = all[i].textContent || all[i].innerText; 
     if (text.indexOf(search) !== -1 && ! all[i].hasChildNodes()) { 
      all[i].className = all[i].className + " " + replacement; 
     } 
    } 
} 

var replacements = [ 
    ["Twitter","twitter"], 
    // 
] 

for (var i = replacements.length - 1; i >= 0; i--) { 
    add_class(replacements[i][0],replacements[i][1]); 
};

注：我沒有測試這在所有。

來源

2013-10-04 20:12:16 Ethan

感謝您的建議。這個代碼是否可以簡單地複製到WordPress的functions.php文件中，還是需要添加它？ – jordanhuxley

你會想把它放在一些腳本標籤之間。也許等到DOM加載之後。您還需要檢查它在JS控制檯中的錯誤。 – Ethan

這是'JavaScript' @jordanhuxley，而不是'PHP'。你最好把它放在一個專用的'.js'文件中，並在結束''標籤之前包含它。 –

如果您知道JavaScript中的最低限度，這個JavaScript庫可以讓您的生活更輕鬆。它會將字符串中的所有字母轉換爲span標籤。 http://daverupert.com/2010/09/lettering-js/

來源

2013-10-04 20:51:08

對於那些你感興趣的答案，我已經使用WordPress的功能創造了一個解決方案：

function replace_custom_word($text){ 
    $replace = array(
    'Twitter' => '<span class="twitter"><a title="Twitter" target="_blank" href="http://www.twitter.com/">Twitter</a></span>', 
    'Facebook' => '<span class="facebook"><a title="Facebook" target="_blank" href="http://www.facebook.com/">Facebook</a></span>' 
    ); 

$text = str_replace(array_keys($replace), $replace, $text); 
return $text;}

來源

2013-10-05 10:41:08 jordanhuxley

我覺得最直接的方式做到這一點是通過使用智能jQuery highlight插件我碰到了。應用之後，你就可以做你以後的事情。下面是一個例子，並在最後一個鏈接到現場小提琴：

HTML

<p>Some examples of how to highlight words with the jQuery Highlight plugin. First an example to demonstrate the default behavior and then others to demonstrate how to highlight the words Facebook and Twitter with their own class names. Words will be highlighted anywhere in the DOM, one needs only to be specific on where the script should look for the words. It supports case-sensitivity and other options, like in the case of YouTube.</p>

CSS

p { line-height: 30px; } 
span { padding: 4px; } 
.highlight { background-color: yellow; } 
.facebook { background-color: #3c528f; color: white; } 
.twitter { background-color: #1e9ae9; color: white; } 
.youtube { background-color: #be0017; color: white; }

高亮插件（需要後裝載jQuery和之前的JavaScript）

<script type="text/javascript" src="http://github.com/bartaz/sandbox.js/raw/master/jquery.highlight.js"></script>

// default 
$("body p").highlight("default"); 
// specify class name (not case sensitive) 
$("body p").highlight("twitter", { className: 'twitter' }); 
$("body p").highlight("facebook", { className: 'facebook' }); 
// specify class name (case sensitive) 
$("body p").highlight("YouTube", { className: 'youtube', caseSensitive: true });

包含此JavaScript頁面（在body結束標記，這樣你就不需要使用下面的函數之前的底部：

$(document).ready(function() { 
    // unnecessary if you load all your scripts at the bottom of your page 
});

Fiddle for the win！ :)

來源

2013-10-06 23:07:03

將CSS重複應用於特定單詞

回答

相關問題