JavaScript Tutorial/Dojo toolkit/Style Class

Материал из Web эксперт
Версия от 18:52, 25 мая 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_Tutorial/Dojo_toolkit/Style_Class&oldid=8616»