☰

» »

js button

js button

bigbada ::

v div-u imam spane elementov, ki imajo vsi svoj border definiran v css-ju in barvo

<span onclick="izbira(this)">test1</span>
<span onclick="izbira(this)">test2</span>
...


zdaj pa v js. imam funkcijo in bi rad spremenil barvo teh borderjev, ki so okrog teh elementov v spanu
nekako mi ne uspe?
function izbira(tipka){ document.bgColor="red"; } to mi spremeni ves document v rdečo.. kako naj dostopam samo do tistega elementa, ki se je kliknil ?

Pimoz :: 

<html>
<head>
<style type="text/css">
#tipke span {
    display: block;
    border: 1px solid #000;
    clear: right;
    float: left;
    margin-right: 5px;
    padding: 5px 10px;
}
</style>
<script type="text/javascript">
function izbira(tipka) {
	tipka.style.background = "red";
}
</script>
</head>
<body>
    <div id="tipke">
        <span onclick="izbira(this)">a</span>
        <span onclick="izbira(this)">b</span>
        <span onclick="izbira(this)">c</span>
    </div>
</body>
</html>


ali pa če hočeš obarvati ozadje ko z miško pokažeš na element
<html>
<head>
<style type="text/css">
#tipke span {
    display: block;
    border: 1px solid #000;
    clear: right;
    float: left;
    margin-right: 5px;
    padding: 5px 10px;
}
#tipke span:hover {
    background-color: red;
}
</style>
</head>
<body>
    <div id="tipke">
        <span onclick="izbira(this)">a</span>
        <span onclick="izbira(this)">b</span>
        <span onclick="izbira(this)">c</span>
    </div>
</body>
</html>

bigbada ::

Jao, tak na easy je to. Jaz pa sem se zezal s tem da sem vsakemu dodajal id.. pa potem preko tega nekaj probaval.. :(

Hvala za pomoč. Mogoče še veš, kako bi naredil, da se vse skupaj refresha - celoten html, da se nastavi na default kot je na zacetku ? Recimo te tipke, ko se pobarvajo bi rad, da imam nekakšno funkcijo refresh(), ki vse nastavi nazaj na prvotno barvo-gray.

Nextor ::

Jas ti priporočam jquery! Enfoh, ko pasol! Več info v dokumentaciji...

Pimoz :: 

<html>
<head>
<style type="text/css">
#tipke span {
    display: block;
    border: 1px solid #000;
    clear: right;
    float: left;
    margin-right: 5px;
    padding: 5px 10px;
}

p {
    clear: both;
    padding: 10px;
}
</style>
<script type="text/javascript">
function izbira(tipka) {
	tipka.style.background = (tipka.style.background == "") ? "red" : "";
}
function reset(what) {
	var nodeList = document.getElementById(what).getElementsByTagName("span");
	for (var i = 0; i < nodeList.length; i++) {
		nodeList[i].style.background = "";
	}
}
</script>
</head>
<body>
    <div id="tipke">
        <span onClick="izbira(this)">a</span>
        <span onClick="izbira(this)">b</span>
        <span onClick="izbira(this)">c</span>
    </div>
    <p>
    	<a href="#" onClick="javascript:reset('tipke');return false;">Reset...</a>
    </p>
</body>
</html>


drugače se pa strinjam...uporabi jQuery

Zgodovina sprememb…

  • spremenilo: Pimoz ()

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 )

Oddelek: Izdelava spletišč		1298346118 (5255) sunniegoldie
»

Prikaz strani na različni resoluciji-Joomla

Oddelek: Izdelava spletišč		151941 (1669) kr?en
»

meni razporejen po celotni dolžini

Oddelek: Izdelava spletišč		72233 (2101) XzupanX
»

poravnava li elementov

Oddelek: Izdelava spletišč		82143 (2008) boss-tech
»

CSS problemi (strani: 1 2 )

Oddelek: Izdelava spletišč		519831 (7630) nuuush

Več podobnih tem