JavaScript DHTML/Dojo toolkit/Color

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

Blend colors

 
<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>



Change color object to CSS

 
<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>



Color from Hex value

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      var c1 = dojo.colorFromHex("#00ff00");
      alert(c1);

    </script>
  </head>
  <body></body>
</html>



Color from hex value based on existing value

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      var c1 = new dojo.Color([255, 0, 0]);
      alert(c1);
      
      dojo.colorFromHex("#0000ff", c1);
      alert(c1);
    </script>
  </head>
  <body></body>
</html>



Convert dojo.Color object to CSS

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
  </head>
  <body>
    <script language="JavaScript" type="text/javascript">
      var c = new dojo.Color("red");
      document.write(c.toCss());
    </script>
  </body>
</html>



Convert dojo.Color to hex value

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
  </head>
  <body>
    <script language="JavaScript" type="text/javascript">
      var c = new dojo.Color("red");
      document.write(c.toHex());
    </script>
  </body>
</html>



Convert dojo.Color to RGB

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
  </head>
  <body>
    <script language="JavaScript" type="text/javascript">
      var c = new dojo.Color("red");
      document.write(c.toRgb());
    </script>
  </body>
</html>



Convert dojo.Color to RGBA

 

<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
  </head>
  <body>
    <script language="JavaScript" type="text/javascript">
      var c = new dojo.Color("red");
      document.write(c.toRgba());
    </script>
  </body>
</html>



Create a gray color

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
  </head>
  <body>
    <script language="JavaScript" type="text/javascript">
      dojo.require("dojo.colors");
      document.write(dojo.colors.makeGrey(100));
    </script>
  </body>
</html>



Create color from your array

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
  </head>
  <body>
    <script>
      var c1 = dojo.colorFromArray([150, 150, 150]);
    
      document.write(c1)
    </script>
  </body>
</html>



Create dojo.Color

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      var c1 = new dojo.Color([255, 0, 0]);
      alert(c1);
    </script>
  </head>
  <body></body>
</html>



Create dojo.Color from an Array based on existing color

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
  </head>
  <body>
    <script>
      var c1 = dojo.colorFromArray([150, 150, 150]);
      document.write(c1+"<BR>")
    
      dojo.colorFromArray([200, 200, 200], c1);
      document.write(c1)
    </script>
  </body>
</html>



Create dojo.Color from String

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
  </head>
  <body>
    <script language="JavaScript" type="text/javascript">
      var c = new dojo.Color("red");
      alert(c.toHex());
      c.setColor([0,255,0]);
      alert(c.toHex());
    </script>
  </body>
</html>



Set color to new value

 
<html>
  <head>
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/"
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
  </head>
  <body>
    <script language="JavaScript" type="text/javascript">
      var c = new dojo.Color("red");
      alert(c.toHex());
      c.setColor([0,255,0]);
      alert(c.toHex());
    </script>
  </body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Dojo_toolkit/Color&oldid=2043»