J'ai des chiffres de points flottants où je voudrais indiquer que ces derniers chiffres ne sont pas aussi importants. Ce que j'ai à l'esprit, c'est quelque chose comme ça.
pour le numéro 273.978 P>
<span id="numstart" style="font-weight:bold">123.4</span><span id="numend" style="color:#3399ff">57</span>
<script>
var newnum = 273.978;
var numStr = String(newnum)
var numLen = numStr.length;
var newStart = numStr.substring(0,numLen-2);
var newEnd = numStr.substring(numLen-2,numLen);
document.getElementById("numstart").innerHTML = newStart;
document.getElementById("numend").innerHTML = newEnd;
</script>
4 Réponses :
Vous pouvez utiliser php pour ajouter une classe à la balise de l'espace pour les 3/4 caractères premiers (je suppose que vous utilisez php pour générer ces numéros de points flottants) et une classe différente à quoi que ce soit après cela,
alors simplement Ajoutez les classes à votre fichier CSS pour mettre en surbrillance que vous le souhaitez.
AFAIK Il n'y a pas de sélecteurs CSS pour faire ce dont vous avez besoin, les sélecteurs «nième» sont plus pour les étiquettes, les classes et les identifiants que les caractères individuels. < / p>
EDIT: En JavaScript, cela peut être fait via à l'aide de FOO.CHARAT (N);
alors chargez votre chaîne dans un var: Vous pouvez ensuite imprimer les caractères dans la place appropriée dans le code.
Les chiffres sont tous strictement du côté du client.
autre qu'une approche côté serveur (le plus facile), vous pouvez ajouter une plage de superposition qui a Si vous vous sentez expérimental, vous pouvez essayer le HTML5 largeur: 1,75ème; Couleur de l'arrière-plan: RGBA (255.255.255,0.5) et fixez-le à droite d'un objet de conteneur et d'un index Z supérieur à l'objet d'affichage principal du flotteur.
Cela semble plus dicey qu'une approche JavaScript. Bien que si vous travaillez à travers un exemple, je pourrais être convaincu. Je ne ressens pas vraiment cette expérimentale;)
Ouais - je vais aller au serveur tbh
Sur le dessus de ma tête en JQuery:
<style type="text/css">
.unimportant {
color: #3399ff;
}
</style>
<script type="text/javascript">
var numberTargets = document.getElementsByClassName('number');
for(i=0; i<numberTargets.length; i++) {
var html = numberTargets[i].innerHTML;
numberTargets[i].innerHTML = html.substr(0, html.length-2)
+ "<span class='unimportant'>"
+ numberTargets[i].innerHTML.substr(-2)
+ "</span>";
}
</script>
avait la même idée que Stef:
CSS Seule une solution ou accepteriez-vous JavaScript?
CSS serait génial, mais je ne suis pas optimiste à ce sujet, je vais donc prendre la meilleure solution JavaScript. J'utilise Yui3, mais je ne pense pas que cela compte.
Je ne pense pas qu'il y ait une solution strictement du CSS. Celui que vous présentez ici est à peu près ce que je ferais et imaginerais ce que toute solution JavaScript aurait à peu près.