Python-Ref > Mimo python > JavaScript > Working with styles
 
 

<-^^->
Klíčová slova
Moduly
Knihovní funkce

Working with styles

JavaScript can be very easily combined with CSS to create interesting dynamic effects.
Expand/Shrink
function set_style(id, cls) {
    var e = document.getElementById(id);
    e.className=cls;
}

Zdroj: (js2-1.html)
  1   <html xmlns="http://www.w3.org/1999/xhtml">
  2   <head>
  3    <title>Javascript example</title>
  4    <meta content="text/html; charset=utf-8" http-equiv="content-Type"/>
  5    <script src="infiles/js2-1.js" type="text/javascript"> </script>
  6    <style type="text/css">
  7   .black { color: black; font-size: 100%; }
  8   .red { color: red; font-size: 120% }
  9    </style>
 10   </head>
 11   <body>
 12     <button onclick="javascript:set_style('text','black');">Black</button>
 13     <button onclick="javascript:set_style('text','red');">Red</button>
 14     <div id="text">This is text that will be colored based on which button you hit.</div>
 15   </body>
 16   </html>
Doba běhu: 2.5 ms
Expand/Shrink
function switch_style(id, cls1, cls2) {
    var e = document.getElementById(id);
    if (e.className == cls1)
	e.className = cls2;
    else
	e.className = cls1;
}

Zdroj: (js2-2.html)
  1   <html xmlns="http://www.w3.org/1999/xhtml">
  2   <head>
  3    <title>Javascript example</title>
  4    <meta content="text/html; charset=utf-8" http-equiv="content-Type"/>
  5    <script src="infiles/js2-2.js" type="text/javascript"> </script>
  6    <style type="text/css">
  7   .shown { display: block; }
  8   .hidden { display: none; }
  9    </style>
 10   </head>
 11   <body>
 12     <a href="javascript:switch_style('text','hidden','shown');">hide/unhide</a>
 13     <div id="text">This is text that will be hidden or shown based on clicking the above link.</div>
 14     <div>This text will be untouched by the JavaScript.</div>
 15   </body>
 16   </html>
Doba běhu: 2.3 ms