Hoe de kleur van een enkele letter in een woord te veranderen met behulp van CSS/HTML of Javascript

Dit is een voorbeeld dat ik heb gemaakt van wat ik probeer te bereiken:

[website link verwijderd]

Maar als je naar de broncode kijkt, heeft deze veel rommelige CSS-code. Is er een manier om dit met Javascript te doen? Alvast bedankt!

0
@fmsf: dit soort vragen gaat hier niet over niet . "Vertel me hoe iets op deze website [link naar website] te implementeren" absoluut niet is toegestaan.
toegevoegd de auteur Will, de bron
hoe kan dit worden gesloten als niet constructief? het is een geweldige oefening: p
toegevoegd de auteur fmsf, de bron
@gdoron: het is een geldige vraag. Maar dan zou ik vragen wat de code golfen zijn?
toegevoegd de auteur fmsf, de bron
@gdoron: ok goed genoeg voor de code golf, maar dit is naar mijn mening nog steeds een geldige vraag :)
toegevoegd de auteur fmsf, de bron
@fmsf. Omdat vragen oefeningen voor de lezers niet mogen zijn
toegevoegd de auteur gdoron, de bron
@fmsf. En het antwoord is: "Code Golf is niet langer on-topic voor Stack Overflow"
toegevoegd de auteur gdoron, de bron
u hebt hiervoor geen JavaScript nodig, plaats in principe alleen "ULTRATEXT" in lijstitems en maak gebruik van de CSS hover-eigenschap.
toegevoegd de auteur He Hui, de bron

3 antwoord

Dit is een manier waarop je gewoon in HTML schrijft:

<div id="wrap" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin, felis nec lacinia egestas, metus sem tempor ligula, nec feugiat risus erat a ante. Vivamus a neque eu lorem pharetra vulputate ac id arcu. Nulla facilisi. Quisque porta purus id dolor sollicitudin ut interdum eros bibendum. Nunc dignissim velit vitae leo posuere vel tristique lacus bibendum. Nam suscipit elit magna. Cras odio ipsum, ultricies aliquet lacinia ac, tincidunt ut erat. In venenatis interdum mauris, a lobortis augue mattis vel. Donec sem urna, adipiscing laoreet consectetur nec, sodales id nibh. Integer gravida sem luctus nibh luctus tristique. In tempor adipiscing nisl. Proin consectetur, lorem eget sodales auctor, nulla quam condimentum tortor, sed fringilla massa neque non dolor.
</div>

JS:

var elem=document.getElementById("wrap");
var l=elem.innerHTML.length;
var newAns="";
for(var a=0;a';
}
elem.innerHTML=newAns;

function change1(x)
{
    x.style.color="yellow";
}
function change2(x)
{
    x.style.color="black";
}

Fiddle: http://jsfiddle.net/mageek/HKBVJ/

1
toegevoegd

Coole oefening. Ik zou het zo doen met jQuery als hulpmiddel:

EDIT: daar ga je met de zweeftekst. heeft het niet getest, dus controleer voor syntaxisfouten voor het geval dat: p

<div id="divWithAString">a string</div>
(...)
<script type="text/javascript">
function CoolFunctionToGenerateHexColours(){
    var color ="#", i ;
    for(i=0;i<6;i++){
        color += Math.floor(Math.random()*16).toString(16);
    }
    return color;
}

var s = $("#divWithAString").text();
$("#divWithAString").empty();
$(s).each(function(i,e){
   var colorHex = CoolFunctionToGenerateHexColours();
   var $htmlnode = $(''+e+'');
   $htmlNode.hover(function(){
       $(this).attr("style", "color: "+colorHex +";");
   }, function(){
       $(this).attr("style", "");
   });
   $("#divWithAString").append($htmlNode);

});
</script>
0
toegevoegd
Vervang het dan door $ (this) .attr ("style", "color:" + colorHex + ";"; en probeer zelf een beetje na te denken.
toegevoegd de auteur zessx, de bron
Dat is geen Javascript-probleem, Syntaxisfout is een veelvoorkomende fout die u in elke taal kunt vinden. Neem even de tijd om de foutmelding te lezen en je zal het kunnen repareren (nou, kopieer en plak op SO zonder ook te lezen kan ...)
toegevoegd de auteur zessx, de bron
het werkt niet :( Mijn programma zegt dat er hier een syntaxisfout is: $ (this) .attr ("style", "color: '+ colorHex +';" ');
toegevoegd de auteur user1477911, de bron
Sorry, ik had kunnen zeggen dat ik niet weet hoe ik in JavaScript moet programmeren.
toegevoegd de auteur user1477911, de bron

Ik denk dat dit zou moeten helpen, je kunt de hover-functionaliteit implementeren.

<script type="text/javascript">
   var message = "The quick brown fox.";
   var colors = new Array("#ff0000","#00ff00","#0000ff");//red, green, blue
   for (var i = 0; i < message.length; i++)
      document.write("" + message[i] + "");
</script>
0
toegevoegd