11 replies to this topic

[Cajado]

Olá pessoal,
é o seguinte, tenho uma div, ou um parágrafo, ou h1, etc... e queria deixar a primeira palavra do conteúdo dessa tag com uma cor diferente. Exemplo:

Este é um exemplo.

Tenho de fazer isso de forma automática. Pensei em usar CSS, usando pseudo-elementos, mas só serve para a primeira letra ou primeira linha da tag. Então creio que haja solução usando javascript.

Se alguem puder ajudar.
Desde já agradeço.

[Willian Gustavo Veiga]

Boa tarde, tudo bem?

Não sei se entendi bem, mas lá vai:

HTML
<div><span class="vermelho">Palavra</span> com uma cor diferente</div>

CSS
span.vermelho {
    color: #ff0000;
}

Um abraço, qualquer coisa posta novamente.

Edição feita por: Willian Gustavo Veiga, 26/11/2009, 14:53.

[Cajado]

Bem essa solução eu já sabia, e aliás é a mais óbvia, mas o que acontece é que preciso de um sisteminha para definir automaticamente isso... creio q com javascript tenha como fazer...

Vamos lá pessoal, me ajudem aê....
Não manjo de JS, mas sei que isso é moleza pra vcs...

[brunoXP]

Acho que seria mais fácil fazer isso aí com PHP, não?

[Alex Hiroshi]

É fácil. Recupere o texto (recomendo deixá-lo em uma tag); 'quebre-o', separando a primeira palavra; adicione uma tag nessa primeira palavra para estilizar e depois é só colocar de volta na página. Veja um exemplo:

<style type="text/css" media="screen">

	.vermelho {color:red;}

</style>



<p id="texto">Esse é um exemplo para o Fórum WMO!</p>



<script type="text/javascript">

	var par = document.getElementById('texto');

	var primeiro = par.innerHTML.substring(0, par.innerHTML.indexOf(' '));

	var resto = par.innerHTML.substring(par.innerHTML.indexOf(' '));

	var transforma = "<span class='vermelho'>"+primeiro+"</span> ";

	par.innerHTML = transforma+resto;

</script>

[Cajado]

Maravilha! Valeu Alex, funfou perfeitamente!

Só um detalhe que acabei esquecendo...
Teria como definir este script por classe, ou invés de id? Porque precisarei repetir este processo em várias partes de uma mesma página....

[Alex Hiroshi]

Tem sim. Troque o document.getElementById() por essa função: http://forum.wmonlin...ntsbyclassname/

[Cajado]

Humm Alex...
tentei fazer o q sugeriu mas não deu certo...

[Alex Hiroshi]

Poste aqui a sua tentativa.

[Cajado]

Aí está a tentativa:

<script type="text/javascript">
        var par = function getElementsByClassName('texto') {
        var elements = document.getElementsByTagName("*");
        var result = [];

        for (var i = 0, len = elements.length; i < len; i++) {
                if (elements[i].className == 'texto') {
                        result.push(elements[i]);
                }
        }

        return result;
};
        var primeiro = par.innerHTML.substring(0, par.innerHTML.indexOf(' '));
        var resto = par.innerHTML.substring(par.innerHTML.indexOf(' '));
        var transforma = "<span class='verde'>"+primeiro+"</span> ";
        par.innerHTML = transforma+resto;
</script>

[Alex Hiroshi]

Tente assim:

<script type="text/javascript">
	function getElementsByClassName(sClassName) {
		var elements = document.getElementsByTagName("*");
	    var result = [];

	    for (var i = 0, len = elements.length; i < len; i++) {
	    	if (elements[i].className == sClassName) {
	        	result.push(elements[i]);
	        }
	    }

	    return result;
	}

	var par = getElementsByClassName('texto');

	for (var i=0; i < par.length; i++)
	{
		var primeiro = par[i].innerHTML.substring(0, par[i].innerHTML.indexOf(' '));
		var resto = par[i].innerHTML.substring(par[i].innerHTML.indexOf(' '));
		var transforma = "<span class='vermelho'>"+primeiro+"</span> ";
		par[i].innerHTML = transforma+resto;
	}
</script>

[Cajado]

Valeu Alex... nesse natal vou te mandar um panetonne