Změnit barvu textu za chodu.
Mám tabulku (hodně zjednodušeně):
<table id="tabulka" border="1"><tbody>
<tr>
<td id="t00" style="color : #ff006a;">
<input type="text" value="data 1">
</td>
<td id="t01" style="color : #ff006a;">
<input type="text" value="data 2">
</td>
</tr>
</tbody></table>
A potřebuju za chodu pomocí javascriptu změnit barvu textu, který je v konkrétním inputboxu. Jsou to statické stránky, žádný php, či asp.
Po jaké akci se to má změnit? Při najetí myší, při kliknutí...
Nemyslíš něco takového?
http://www.jakpsatweb.cz/javascript/priklady/zmena- pozadi.html
najeď myší na to "Ahoj Yuhu"
Pokud by se měla změnit pouze barva při najetí, šlo by to určitě bez javascriptu, nadefinováním textu jako odkazu a ve stylu (CSS) si nedefinovat barvy odkazu, kurzor atd (nezkoušel jsem).
Normální prohlížeče podporují navíc i pseudoelemet :hover. JESPRP bohužel ne.
Myslím jako že bych si nadefinoval funkci v javascriptu, která by mi analyzovala číselná data v příslušných inputboxech a označila by mi barevně chybná data červeně, výhodná data modře a ostatní by ponechala černá. Uživatel by zadával data do inputboxů (případně měnil) a stiskem tlačítka by se barevně zvýraznily některé hodnoty a on by mohl provádět změny podle svého uvážení a tak dál, pořád dokola, až by se dopracoval k nejvýhodnějšímu řešení.
Robil by som to asi takto:
1. Všetkým textboxom, ktoré sa majú kontrolovať, nastavím v class="validate". (html)
2. Pri nahratí stránky v obsluhe metódy onload prebehnem všetky elementy input type="text", ktoré majú nastavené class="validate" a nastavím im funkciu validate, aby obsluhovala udalosť onkeyup. Pri tejto inicializácii funkciu validate tiež zavolám, aby sa nastavila farba prvku podľa aktuálnej hodnoty. (js)
3. Funkcia validate kontroluje, či je vstup v prvku validný a podľa nastavuje element.className na "invalid". (js)
4. V štýle definujem farbu pre prvky ".invalid". (css)
[js]// nastavuje el.className (pozor, el.className sú triedy oddelené bielymi znakmi,
// takže to nie je len el.className = className)
var helper =
{
addClass: function (el, className) { ... },
removeClass: function (el, className) { ... },
hasClass: function (el, className) { ... }
};
// skontroluje hodnotu elementu a upraví className
function validate (el)
{
if (el.value - 0 > 5)
helper.addClass (el, "invalid");
else
helper.removeClass (el, "invalid");
}
// nainicializuje 1 textbox
function initTextbox (el)
{
el.onkeyup = function () {validate (el)};
validate (el);
}
// nahratie stránky
window.onload = function ()
{
var els = document.getElementsByTagName ("input");
var el;
for (var i = 0; (el = els [i]); ++i)
if (el.type == "text" && helper.hasClass (el, "validate"))
initTextbox (el);
};
[/js]
Na ten tvůj nápad se podívám, ale zatím jsem to udělal takto (funkční příklad ve firefoxu 1.5.0.1):
V konqueroru 3.4.2 to chodí taky. Akorát nevím jestli v IE.
A dotaz: Javascript vkládáte pomocí [code lang="js"][/code]?
Áno, JavaScript vkladám pomocou tlačidla pre JavaScript, ktoré obalí kód do [code lang="js"][/code] (formátovanie sa dá vyskúšať pri náhľade).
Tvoj kód funguje aj v IE.
Doplním ešte do minulého kódu JavaScript:
[js]var helper =
{
addClass: function (el, className)
{
this.removeClass (el, className);
el.className += " " + className;
},
removeClass: function (el, className)
{
var cls = el.className.split (/\s+/);
var ar = [];
for (var i = cls.length; i > 0;)
if (cls [--i] != className)
ar [ar.length] = cls [i];
el.className = ar.join (" ");
},
hasClass: function (el, className)
{
var cls = el.className.split (/\s+/);
for (var i = cls.length; i > 0;)
if (cls [--i] == className)
return true;
return false;
}
};
[/js]
CSS:
HTML: