JavaScript DHTML/Dojo toolkit/Style Class — различия между версиями

Материал из Web эксперт
Перейти к: навигация, поиск
м (1 версия)
 
(нет различий)

Текущая версия на 07:20, 26 мая 2010

Add style class to tag by using dojo.addClass("myDiv", "myClass")

 
<html>
  <head>
    <style>.myClass { background: #f0f;color : #ffff00; }</style>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
  </head>
  <body onLoad="dojo.addClass("myDiv", "myClass");">
    <div id="myDiv">Testing, 1...2...3!</div>
  </body>
</html>



Change margin box

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script language="JavaScript" type="text/javascript">
      function testIt() {
        alert(dojo.toJson(dojo.marginBox("myDiv")));
        dojo.marginBox("myDiv",
          { l : 75, t : 75, width : 800, height : 800 }
        );
        alert(dojo.toJson(dojo.marginBox("myDiv")));
      }
    </script>
  </head>
  <body onLoad="testIt();">
    <div id="myDiv">Hello</myDiv>
  </body>
</html>



Change style with dojo.style

 
<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
      
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
        dojo.addOnLoad(function(  ) {
                var blue = new dojo.Color("#00f");
                var red = new dojo.Color([255, 0, 0]);
                var purple = dojo.blendColors(blue, red, 0.5);
                dojo.style("my", "background", purple.toCss(  ));
            });
    </script>
  </head>
  <body class="tundra">
       <p style="position : absolute; left : 300px; top : 300px;"
                  id="my"
               >Drag and drop me somewhere else</p>
</body>
</html>



Get computed border width

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      function doOnLoad() {
        var o = dojo.byId("myDiv");
        alert(dojo.getComputedStyle(o).borderWidth);
      }
    </script>
  </head>
  <body onLoad="doOnLoad();">
    <div style="border-width:10px;" id="myDiv">I am myDiv</div>
  </body>
</html>



Get style from tag

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      function testIt() {
        alert(dojo.style("myDiv", "color"));
        dojo.style("myDiv", "color", "#0000ff");
      }
    </script>
  </head>
  <body onLoad="testIt();">
    <div id="myDiv" style="color:#ff0000;">I am myDiv</div>
  </body>
</html>



Mix two classes

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script language="JavaScript" type="text/javascript">
      function FirstName() {
        this.firstName = "A";
      }
      function LastName() {
        this.lastName = "B";
      }
      var o = dojo.mixin(new FirstName(), new LastName());
      alert(dojo.toJson(o));
    </script>
  </head>
  <body></body>
</html>



Remove class

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <style>
      .oldClass {
        background-color : blue;
      }
    </style>
    <script>
      dojo.require("dojox.fx.style");
      function testIt() {
        dojox.fx.removeClass({cssClass:"oldClass", node:"div1"}).play();
      }
    </script>
  </head>
  <body onload=testIt()>
        <div id="div1" class="oldClass">Text</div>
  </body>
</html>



Set new style

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      function testIt() {
        alert(dojo.style("myDiv", "color"));
        dojo.style("myDiv", "color", "#0000ff");
      }
    </script>
  </head>
  <body onLoad="testIt();">
    <div id="myDiv" style="color:#ff0000;">I am myDiv</div>
  </body>
</html>



Toggle tag class with dojo.toggleClass("myDiv", "myClass")

 
<html>
  <head>
    <style>
      .myClass {
        color : #ff0000;
      }
    </style>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      function testIt() {
        dojo.toggleClass("myDiv", "myClass");
        alert("toggle");
        dojo.toggleClass("myDiv", "myClass");
      }
    </script>
  </head>
  <body onLoad="testIt();">
    <div id="myDiv">I am myDiv</div>
  </body>
</html>



Toggle with true and false

 
<html>
  <head>
    <style>
      .myClass {
        color : #ff0000;
      }
    </style>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      function testIt() {
        dojo.toggleClass("myDiv", "myClass", true);
        alert("toggle");
        dojo.toggleClass("myDiv", "myClass", false);
      }
    </script>
  </head>
  <body onLoad="testIt();">
    <div id="myDiv">I am myDiv</div>
  </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Dojo_toolkit/Style_Class&oldid=2049»