• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

In h1-tag ersten Buchstaben aller Wörter stylen

B

burn4ever

Mitglied
Hallo,
ich möchte Mitteles JavaScript oder jQuery in einer Headline den ersten Buchstaben von jedem Wort eine andere Farbe verpassen.

Grungedanke ist den ersten Buchstaben mit einer Klasse zu versehen.
Nur weiss ich nicht wie ich jedem Buchstaben eine Klasse (oder span?) hinzufügen kann?
 
Mit JS geht das so:
Code: 
[FONT=Monaco][COLOR=#931a68]var[/COLOR] headlines = document.getElementsByTagName([COLOR=#3933ff]'h1'[/COLOR]);[/FONT]
[FONT=Monaco][COLOR=#931a68]for[/COLOR] ([COLOR=#931a68]var[/COLOR] i = 0; i [COLOR=#4f76cb]<[/COLOR] headlines.length; i++) {[/FONT]
[FONT=Monaco]         [COLOR=#931a68]var[/COLOR] headlineText = headlines[i].innerHTML;[/FONT]
[FONT=Monaco]        [COLOR=#931a68]var[/COLOR] letter = headlineText.charAt(0);[/FONT]
[FONT=Monaco]        [COLOR=#931a68]var[/COLOR] span = [COLOR=#3933ff]'<span>'[/COLOR] + letter + [COLOR=#3933ff]'</span>'[/COLOR];[/FONT]
[FONT=Monaco]        [COLOR=#931a68]var[/COLOR] newText = headlineText.replace(letter, span);[/FONT]
[FONT=Monaco]headlines[i].innerHTML = newText;
[/FONT][FONT=Monaco]}[/FONT]
 
Nein, mit h1:first-letter hat man Zugriff auf den ersten Buchstaben des ersten Wortes in h1-Überschriften.
 
Moin,
dafür gibts capitalize
Code: 
h1 {
text-transform: capitalize;
}

MfG

//EDIT
sorry, hab den ersten post nicht richtig gelesen :-)
 
Wobei die Lösung etwas schwieriger ist, sofern man jedes Wort innerhalb der Überschriften kapitalisieren will. Mal angenommen, man hätte folgendes Konstrukt:
HTML: 
<!DOCTYPE html>
<html>
  <head>
    <title>Foobar</title>    
    <link rel="stylesheet" href="styles.css" type="text/css" /> 
    <meta charset="utf-8">
  </head>
  <body>
  	<h1>hello world</h1>
  	<h1>foo bar</h1>
  	<h1>not me</h1>
  <script>

  	var headlines = document.getElementsByTagName('h1');
  	
	for (var i = 0; i < headlines.length; i++) {
		var headlineText = headlines[i].innerHTML;
		var textArr = headlineText.split(' ');

		for (j = 0; j < textArr.length; j++) {
			var foo = new Array;
			foo.push(capitalize(j));
		}
			alert(foo);
	}

	function capitalize(j) {
		var firstLetter = textArr[j].toString().charAt(0).toUpperCase();
		var rest = textArr[j].substring(1);
		return firstLetter.concat(rest);
	}

  </script>
  </body>
</html>

Die äußere Schleife durchläuft alle <h1> Tags und splittet das innerHTML. Die innere Schleife zerlegt die Wörter und tauscht den ersten Buchstaben gegen ein Capital. Wie erreiche ich es nun, dass die einzelnen Substrings in der inneren Schleife wieder zusammen gefügt, anstatt beim Iterieren überschrieben werden? Array.push() funktioniert hier nicht. Ein alert(foo) gibt nur jeweils das zweite Wort des <h1> Tags zurück.
 
hi,

Code: 
[COLOR=#000080]var foo = new Array;[/COLOR]
sollte ausserhalb der Schleife stehen, sonst besteht der Array ja immer aus dem letzten Element (in deinem Fall das Zweite)

und nach der for($j... Schleife könntest dann auch gleich ein
Code: 
headlines[i].innerHTML = foo.join(' ');
schreiben

lg
mac
 
Moin,
also mit jQuery würde ich es so machen:

Code: 
$(document).ready(function() {
  $('h1').each(function(){
    
    var words = $(this).text().split(' ');
    var newHtml = '';
    $.each(words, function() {
        newHtml += '<span class="firstletter">'+this.substring(0,1)+'</span>'+this.substring(1) + ' ';
        });
    console.log(newHtml);
    $(this).html(newHtml);
    
  });
});

MfG
 
oder:
HTML: 
<!DOCTYPE html>
<html>
  <head>
    <title>Foobar</title>    
    <link rel="stylesheet" href="styles.css" type="text/css" /> 
    <meta charset="utf-8">
    <style type="text/css">.hl{text-transform: uppercase;color:red}</style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $.each($("h1"),function() {
                $(this).html($(this).text().replace(/\b(\w)/g,'<span class="hl">$1</span>'));
            });
        });
    </script>
  </head>
  <body>
      <h1>hello world</h1>
      <h1>foo bar</h1>
      <h1>not me</h1>
 
  </body>
</html>
auch grad gebastelt :)
 
Ok, wenn es pures JS sein soll, dann so
:)
Code: 
document.addEventListener("DOMContentLoaded",function(){
var header = document.getElementsByTagName('H1');
  for (var i = 0; i < header.length; i++) {
    var newHtml = "";
    var headline = document.getElementsByTagName('H1')[i].innerHTML;
    var words = headline.split(' ');

      for (j = 0; j < words.length; j++) {
        newHtml += '<span class="firstletter">'+words[j].substring(0,1)+'</span>'+words[j].substring(1) + ' ';
      }
      document.getElementsByTagName('H1')[i].innerHTML = newHtml;
    }
});

MfG
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben