Zanimljivo - Dinamička uslovna promena stilovaCitat:
<div id="jedan">jedan</div>
Ako ovom elementu želimo da promenimo boju teksta dinamički - malo javascripta:
document.getElementById ('jedan').style.color = '#00f';
<div id="dva" style="color: #00f;">dva</div>
Ako element već ima plavi tekst, neka postane crven, inače neka bude plav:
var divId = 'dva';
var divStyle = document.getElementById (divId).style;
divStyle.color = divStyle.color == '#00f' ? '#f0f' : '#00f';
Ako se plavi tekst ne definiše u tagu već u CSS elementu ili fajlu:
#tri {color: #00f;}
<div id="tri">tri</div>
var divId = 'tri';
var divStyle = document.getElementById (divId).style;
divStyle.color = divStyle.color == '#00f' ? '#f0f' : '#00f';
... ne dobija se isti rezultat !
Ako ovom elementu želimo da promenimo boju teksta dinamički - malo javascripta:
document.getElementById ('jedan').style.color = '#00f';
<div id="dva" style="color: #00f;">dva</div>
Ako element već ima plavi tekst, neka postane crven, inače neka bude plav:
var divId = 'dva';
var divStyle = document.getElementById (divId).style;
divStyle.color = divStyle.color == '#00f' ? '#f0f' : '#00f';
Ako se plavi tekst ne definiše u tagu već u CSS elementu ili fajlu:
#tri {color: #00f;}
<div id="tri">tri</div>
var divId = 'tri';
var divStyle = document.getElementById (divId).style;
divStyle.color = divStyle.color == '#00f' ? '#f0f' : '#00f';
... ne dobija se isti rezultat !
Niže je kod sličnog primera, predlažem da ga preuzmete i poigrate se malo da vidimo postoji li odgovor na pitanje:
- Kako pročitati inicijalnu vrednost atributa stila elementa koja nije zadana inline?
... naravno, ako već znate odgovor, dajte za početak neki hint. Ako odgovor ne znate, svako mišljenje na temu "u kome grmu čuči zeka" je dobrodošlo.
Primer 2.
Code:
<html>
<head>
<title>style object</title>
<style>
div
{
margin: 1% 10%;
padding: 1%;
background-color: #ccc;
border: thick outset #999;
font: xx-large monospace;
font-weight: bold;
color: #f00;
text-align: center;
}
#id0
{
display: block;
}
#id1
{
display: none;
}
</style>
<script>
toggleDivsStyleDisplay = function ()
{
var divs = document.getElementsByTagName ('div');
var divStyle;
for (var i = 0; i < divs.length; i++)
{
divStyle = divs [i].style;
divStyle.display =
divStyle.display == 'block'
? 'none'
: 'block';
}
}
</script>
</head>
<body>
<div id="id0" onclick="toggleDivsStyleDisplay ();">0</div>
<div id="id1" onclick="toggleDivsStyleDisplay ();">1</div>
</body>
</html>
<html>
<head>
<title>style object</title>
<style>
div
{
margin: 1% 10%;
padding: 1%;
background-color: #ccc;
border: thick outset #999;
font: xx-large monospace;
font-weight: bold;
color: #f00;
text-align: center;
}
#id0
{
display: block;
}
#id1
{
display: none;
}
</style>
<script>
toggleDivsStyleDisplay = function ()
{
var divs = document.getElementsByTagName ('div');
var divStyle;
for (var i = 0; i < divs.length; i++)
{
divStyle = divs [i].style;
divStyle.display =
divStyle.display == 'block'
? 'none'
: 'block';
}
}
</script>
</head>
<body>
<div id="id0" onclick="toggleDivsStyleDisplay ();">0</div>
<div id="id1" onclick="toggleDivsStyleDisplay ();">1</div>
</body>
</html>
