✔ Buchstabe andere Farbe zuweisen

zerix

zerix

Hausmeister
Moderator
Hallo,

ich bin zwar aus dem Java-Bereich, aber mit Java-Script kenne ich mich nicht so aus. ;-)

Jetzt mal ernst. :-)
Ist es möglich bei einem Wort, den ersten Buchstaben eine andere Farbe zu setzen?

Gruß

Sascha
 
Hi,
Ja das ist möglich wenn du ein eigenes HTML Element rumspannst und von dem die Schriftfarbe einstellst. z.B. einen <span> Tag.
 
Das weiß ich ja, dann kann ich es aber auch mit CSS lösen. Ist sowas anders nicht möglich?

Gruß

Sascha
 
Ich habe ja gemeint mit Javascript ein HTML Element rumlegen. Vielleicht zeigst du mal den Ausschnitt vom HTML Code wo sich das Wort (die Wörter) befindet bei dem du die Änderung durchführen möchtest. Wichtig zu wissen ist auch, ob du die Änderung bei einem bestimmten Event z.B. bei Mouseover, oder sofort nach laden der Seite haben willst.
 
Ich möchte es sofort haben, wenn die Seite geladen ist.
Dass ich mit Java-Script Tags einfügen kann, wusste ich nicht. Wenn das der Fall ist, ist das ja gar kein Problem. :-)

Gruß

Sascha
 
Hier ein ganz simples Beispiel wie du so etwas machen kannst:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script>
window.onload = ini;
function ini()
{
	var searchedTag = document.getElementById('dummyId');
	var searchedString = searchedTag.innerHTML;
	var firstLetter = searchedString.substring(0,1);
	var restString = searchedString.substring(1,searchedString.length);
	var finalString = '<span style="color:#ff0000">'+firstLetter+'</span>'+restString;
	searchedTag.innerHTML = finalString;
}
</script>
</head>

<body>
<h1 id="dummyId">Überschrift</h1>
</body>
</html>
 
Weniger Code:
HTML: 
<style type="text/css">
.firstRed {
    color: red;
}
</style>

<script type="text/javascript">
window.onload = function() {
    obj = document.getElementsByTagName('div')[0];
    obj.innerHTML = obj.innerHTML.replace(/\b\ (\w)/g,'&nbsp;<span class="firstRed">$1</span>');
}
</script>

<div>Hat der alte Hexenmeister sich doch ein Mal wegbegeben<br/>
und nun sollen seine Geister auch nach meinem Willen leben</div>
 
Moin Sascha,

zerix hat gesagt.:
Das weiß ich ja, dann kann ich es aber auch mit CSS lösen. Ist sowas anders nicht möglich?
Zum Vergrößern anklicken....

Löse es doch mit CSS, einfacher gehts kaum :)
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2009-02-19" />
<title>Test</title>
<style type="text/css">
<!--
p:first-letter{color:red}
-->
</style>
</head>
<body>
<p>Hollatrio</p>
</body>
</html>
 
Das funktioniert leider nicht so richtig.

Es kann sein, dass es so aussieht
Code: 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
                                charset=ISO-8859-1"   />
<meta name="author"             content="doktormolle" />
<meta name="date"               content="2009-02-19" />
<title>Test</title>
<style type="text/css">
<!--
div:first-letter{color:red}
-->
</style>
</head>
<body>
<div>
<span></span>
<a href="irgendwohin">&laquo;</a>
Hollatrio
<div>
</body>
</html>

Da funktioniert es leider nicht.

Gruß

Sascha
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück