CSS: Spojení s JavaScriptem

Vložení textu|Vypnout styl|Změna stylu|Skrytí textu|Styl JavaScriptem|Změna vzhedu|Přidání třídy|Import stylů JavaScriptem|

Javascript a CSS spojují identifikátory ID a díky nim můžeme skriptem změnit styl CSS. JavaScriptem můžete změnit vše, co pomocí CSS nebo dnes už zastaralého tagu <font>.

Vložení textu

Text můžete přesně vložit, tam kam si určíte pomocí ID - nefunguje v Mozille 

<script>
function i(text){
popis.innerHTML=text;
}
</script>
<input type="button" value="zapiš" onClick="i('dobrý den');>
<span id="popis">
</span>


Pomocí metody innerHTML vložíte zvolený text do bloku textu označeného
identifikátorem popis. Správně by se mělo psát document.popis.innerHTML = text, ale není to nutné, protože v prostředí dokumentu se nacházíme stále. Podobná je metoda innerText, ta by měla vkládat jen text, ne HTML.

Vypnutí a zapnutí stylu

Pomocí JavaScriptu můžete vypnout styl CSS a to pomocí tohoto skriptu, který vypne styl jak mezi tagy <script> a </script>, ale i tag <link href="styl.css" rel="stylesheet">. Sám jsem zvědavý, jak vypadá tato stránka bez stylů: 

<a href="#" onClick="javascript:document.styleSheets[0].disabled=false">Zapni styly</a>
<a href="#" onClick="javascript:document.styleSheets[0].disabled=true">Vypni styly</a>

Zapni styly Vypni styly

Změna stylu

JavaScript umí pracovat s CSS, proto můžete skriptem ovlivnit styl taxtu. Můžete měnit barvu, typ písma, pozadí, velikost..vše na co si vzpomenete: 

<head>
<script>
function styl(){
if (popis.style.color=='red'){
popis.style.color='green';
popis.style.backgroundColor='blue';
popis.style.fontSize='15';
}

else {popis.style.color='red';
popis.style.backgroundColor='';
popis.style.fontSize='11'
}
}
</script>
</head>
<body>
<span id="popis" onMouseOver="styl();" onMouseOut="styl();">
</span>

Funkce styl() zjišťuje zda je barva textu červená popis.style.color=='red', pokud ano
změní jí na zelenou.Pokud je barva jiná, změní jí na červenou.
Syntaxe:
identifikátor.style.color='barva'
identifikátor.style.backgroundColor='barva'
Náhled:
text

Zobrazení a skrytí text

Vlastnostdisplay: none, určuje zda má být text vidět (nefunguje v Mozille) To můžete změnit pomocí JavaScriptu a tohoto skriptu: 

<html>
<head>
<script>
function text(i){
     if (i.style.display=='none'){
     i.style.display='';
     }
     else
     i.style.display='none'
     }
</script>
</head>
<body>
<span onClick="text(polozka)">
<strong>zobraz</strong>
</span>
<span id="polozka" style="display: none;">1. a poslední položka</span>
</body>
</html>

Definovali jsme funkci text(i), její parametr i určuje identifikátor textu, který chceme schovat nebo zobrazit. Kliknete-li na text zobraz vyvolá se tato funkce a zjišťuje, zda je text schován i.style.display=='none' nebo zobrazen i.style.display=''. Pak jsme definovali blok textu označen identifikátorem polozka, a parametrem style jsme definovali, že po načtení dokumentu, nebude tento text vidět display: none.
Výsledek vypadá přesně takto:
zobraz

Styl pomocí JavaScriptu

Ve skriptu můžeme definovat libovolné proměnné a ty potom s pomocí expression převédst na styl CSS 

<script>
barva = "red";
tloustka = "bold";
pismo = "Arial"
</script>

<span style="font-family: expression(pismo); color: expression(barva); font-weight: expression(tloustka)">
TEXT
</span>

Vypadá to takhle Text. Lze to využít v případě, kdy chcete pravidelně měnit styl dokumentu, tak stačí jen měnit proměnné a nemusíte to dělat pomocí identifikátorů.

Změna písma, velikosti a rámečku

Pomocí javascriptu, lze měnit styl úplně všeho. Styl se definuje takto:
identifikátor.style.metoda = barva, velikost..., kde metoda je styl textu.Obecně platí, že metoda má stejné jméno jako v definici CSS.Pokud tento název tvoří více slov oddělených pomlčkami (např. background-color, font-size, font-family), neoddělují se pomlčku.Tedy: fontFamily nebo fontSize.Některé metody:

MetodaEkvivalent v CSS
identifikátor.style.colorcolor
identifikátor.style.fontFamilyfont-family
identifikátor.style.fontSizefont-size
identifikátor.style.backgroundColorbackground-color
identifikátor.style.fontWeightfont-weight
identifikátor.style.borderborder
identifikátor.style.visibilityvisibility
identifikátor.style.displaydisplay

Přidání, odebrání třídy pomocí JavaScriptu

Chceme přidat třídu red, barva červená a písmo Verdana 

document.styleSheets[0].addRule(".red","color: red; font-family: Verdana");

Odstranění libovolného pravidla z externího souboru, nebo ze stránky provedeme takto(3 určuje pořadí tohoto pravidla) 

document.styleSheets[0].removeRule(3)

Import stylů pomocí JavaScriptu

<link href="java.css" rel="stylesheet">, můžeme nahradit takto: 

document.styleSheets[0].addImport("URL('java.css');")

Odstranění importu 

document.styleSheets[0].removeImport(0)

Vložení textu|Vypnout styl|Změna stylu|Skrytí textu|Styl JavaScriptem|Změna vzhedu|Přidání třídy|Import stylů JavaScriptem|

Podobné: Behavior



Doporučuji
Pro své weby používám *Webhosting C4: 20 GB prostoru, PHP, MySQL, e-maily, subdomény za 1200 Kč (zdarma 2 GB navíc každý rok). Více WebhostingC4.cz.
Potřebujete poradit?

Vyhledávání

Osobně doporučuji

Poradna

Pokud si nevíte rady, chcete kontakt na spolehlivého tvůrce webu, či vás zajímá cizí názor, ozvěte se.

Reklama

Reklama: