JavaScript DHTML/Dojo toolkit/Style Class
Содержание
- 1 Add style class to tag by using dojo.addClass("myDiv", "myClass")
- 2 Change margin box
- 3 Change style with dojo.style
- 4 Get computed border width
- 5 Get style from tag
- 6 Mix two classes
- 7 Remove class
- 8 Set new style
- 9 Toggle tag class with dojo.toggleClass("myDiv", "myClass")
- 10 Toggle with true and false
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>