将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重复应用于特定单词

回答

相关问题