Welcome to the seventh lesson of this series of tutorials. Today, let’s take a look at how to manipulate styles through MooTools 1.2 and what we have said in previous stories, which will give you a lot of control over the UI. The style is very simple, but today we will make some adjustments. For example, we want to introduce a key-value pair object. We will also talk about passing variables outside of domready, just like we learned in the lecture on functions. From here, we will start to slowly increase the difficulty and introduce some necessary programming concepts. If you are a newbie in JavaScript or have started learning MooTools for the first time, make sure you understand the previous tutorial and you can ask me any questions as you like.
Basic Methods
.setStyle();
This function allows you to set the style properties of an element. We have used it in some of the previous examples. All you have to do is put it after your selector, and it will change the style properties of one element or multiple elements.
Reference code:
// Define your selector
// Add .setStyle method
// Specify style attributes and values
$('body_wrap').setStyle('background-color', '#eeeeee');
$$('.class_name').setStyle('background-color', '#eeeeee');
Reference code:
<div >
<div class="class_name"></div>
<div class="class_name"></div>
<div class="class_name"></div>
<div class="class_name"></div>
</div>
.getStyle();
Again, this method is just like it literally means. .getStyle(); will return an attribute value of an element.
Reference code:
// First, create a variable to save the value of this style attribute
var styleValue = $('body_wrap').getStyle('background-color');
If we run this code in the example above, then it will return "#eeeeee" to the variable styleValue.
Set and get multiple stylesheet properties
.setStyles();
.setStyles(); As you imagine, you can set multiple attribute values to one element or an array of elements at a time. In order to be able to set multiple stylesheet attribute values at the same time, the syntax of .setStyles(); is slightly different.
Reference code:
// Or start with your selector and add .setStyles({
$('body_wrap').setStyles({
// The following format is: 'property': 'value',
'width': '1000px',
'height': '1000px',
// Special note: The last attribute has no comma
// If there is a comma, it will not be able to cross-browser
'background-color': '#eeeeee'
});
Note: In fact, property selectors can also not require single quotes unless there is a linker "-" in the property name. For example, in "background-color", it is easier to add single quotes to each property selector to keep it simple.
At the same time, it should be noted that the attribute values may be more flexible and changeable (such as "100px" or "#eeeeee"). In addition to strings (a string with only letters, which we will explain more in depth in future tutorials), you can also pass in numbers (which may be interpreted as px in most cases) or variables without quotation marks:
Reference code:
// This sets the value of the variable firstBackgroundColor to string (STRING) '#eeeeee'
var firstBackgroundColor = '#eeeeee';
// You can pass one variable to another variable
// This makes the value of the variable backgroundColor also equal to the string (string) '#eeeeee'
var backgroundColor = firstBackgroundColor;
// This sets the value of the variable divWidth to a number (NUMBER) 500
var divWidth = 500;
$('body_wrap').setStyles({
// In this case, the variable name does not need to be surrounded by quotes
'width': divWidth,
// The same is true for numbers, no quotation marks are required
'height': 1000,
// Another variable
'background-color': backgroundColor,
// A string is a string composed of a series of characters enclosed in single quotes
'color': 'black'
});
.getStyles();
This method allows you to obtain multiple style attributes at once. This is slightly different from what we see above, because it contains multiple data sets, each with a key (key, attribute name) and a value (value, attribute value). This dataset is called an object, and the .getStyles(); method can easily put multiple attribute values into these objects and can easily retrieve them.
Reference code:
// First define a variable for your object
// Then create a selector
// Then add .getStyles to your selector
// Then create a comma-separated list of style attributes
// Make sure each property is in a single quote
var bodyStyles = $('body_wrap').getStyles('width', 'height', 'background-color');
// First we create an object to save this property value
// Then we get a value by the specified attribute name (key)
// Put the attribute name between two square brackets []
// Make sure the attribute name is enclosed in single quotes
var bgStyle = bodyStyles['background-color'];
If there is such a style definition in our CSS file:
Reference code:
#body_wrap {
width: 1000px;
height: 1000px;
background-color: #eeeeee;
}
Then the variable bgStyle will contain the value "#eeeeee".
Note: If you want to get a separate property from your stylesheet object, first get an object variable (in this example "bodyStyles"), then use square brackets and single quotes (['']), and finally fill in the property name key (such as width or background-color). It's that simple!
Code Example
In this example, we will use some of the methods we just learned above to get and set styles. While paying attention to the usage of style attribute operations, you should also pay special attention to its own structure. In order to separate our functions from domready, we need to pass those variables into the function of the domready event. We achieve this by passing a parameter to the function in domready. Note that click event uses anonymous method - this allows us to pass variables from the domready event to an outside function. If you don't understand it for the first time, please don't worry. The following examples may make these more clear and clearer:
Reference code:
// Here are some functions
// Note that this function has a parameter: "bgColor"
// This is passed from the domready event
var seeBgColor = function(bgColor) {
alert(bgColor);
}
var seeBorderColor = function(borderColor) {
alert(borderColor);
}
// We pass playDiv to this function so that we can operate this element
// It also allows us to avoid repeated use of selectors
// Useful when dealing with complex selectors
var seeDivWidth = function(playDiv) {
// We start getting the style attributes again
// It is independent from the getStyles we use in domready
// Because we want to use the current value
// This can keep width accurate
// Even if it is changed after the domready event
var currentDivWidth = ('width');
alert(currentDivWidth);
}
var seeDivHeight = function(playDiv) {
var currentDivHeight = ('height');
alert(currentDivHeight);
}
var setDivWidth = function(playDiv) {
('width', '50px');
}
var setDivHeight = function(playDiv) {
('height', '50px');
}
// Note that at this time, this variable can take any name
// It will pass any value, value or element or anything of your
// It will replace anything that comes from domready
var resetSIze = function(foo) {
({
'height': 200,
'width': 200
});
}
('domready', function() {
// Because we have to use this selector multiple times, we assign it to a variable
var playDiv = $('playstyles');
// Here we create an object containing several attributes
var bodyStyles = ('background-color', 'border-bottom-color');
// You can get the style value by calling the attribute name and then pass it to a variable
var bgColor = bodyStyles['background-color'];
// Here we use an anonymous function, so we can pass parameters to functions outside domready
$('bgcolor').addEvent('click', function(){
seeBgColor(bgColor);
});
$('border_color').addEvent('click', function(){
// In addition to passing a style attribute to a variable
// You can also call it directly here
seeBorderColor(bodyStyles['border-bottom-color']);
});
$('div_width').addEvent('click', function(){
seeDivWidth(playDiv);
});
$('div_height').addEvent('click', function(){
seeDivHeight(playDiv);
});
$('set_width').addEvent('click', function(){
setDivWidth(playDiv);
});
$('set_height').addEvent('click', function(){
setDivHeight(playDiv);
});
$('reset').addEvent('click', function(){
resetSIze(playDiv);
});
});
Here is the HTML code:
Reference code:
<div > </div>
<br />
<button >See background-color</button>
<button >See border-bottom-color</button><br /><br />
<button >See width</button>
<button >See height</button><br /><br />
<button >Set weight to 50px</button>
<button >Set height to 50px</button><br /><br />
<button >Reset size</button>
Here is the CSS code
Reference code:
#playstyles {
width: 200px
height: 200px
background-color: #eeeeee
border: 3px solid #dd97a1
}
Basic Methods
.setStyle();
This function allows you to set the style properties of an element. We have used it in some of the previous examples. All you have to do is put it after your selector, and it will change the style properties of one element or multiple elements.
Reference code:
Copy the codeThe code is as follows:
// Define your selector
// Add .setStyle method
// Specify style attributes and values
$('body_wrap').setStyle('background-color', '#eeeeee');
$$('.class_name').setStyle('background-color', '#eeeeee');
Reference code:
Copy the codeThe code is as follows:
<div >
<div class="class_name"></div>
<div class="class_name"></div>
<div class="class_name"></div>
<div class="class_name"></div>
</div>
.getStyle();
Again, this method is just like it literally means. .getStyle(); will return an attribute value of an element.
Reference code:
Copy the codeThe code is as follows:
// First, create a variable to save the value of this style attribute
var styleValue = $('body_wrap').getStyle('background-color');
If we run this code in the example above, then it will return "#eeeeee" to the variable styleValue.
Set and get multiple stylesheet properties
.setStyles();
.setStyles(); As you imagine, you can set multiple attribute values to one element or an array of elements at a time. In order to be able to set multiple stylesheet attribute values at the same time, the syntax of .setStyles(); is slightly different.
Reference code:
// Or start with your selector and add .setStyles({
Copy the codeThe code is as follows:
$('body_wrap').setStyles({
// The following format is: 'property': 'value',
'width': '1000px',
'height': '1000px',
// Special note: The last attribute has no comma
// If there is a comma, it will not be able to cross-browser
'background-color': '#eeeeee'
});
Note: In fact, property selectors can also not require single quotes unless there is a linker "-" in the property name. For example, in "background-color", it is easier to add single quotes to each property selector to keep it simple.
At the same time, it should be noted that the attribute values may be more flexible and changeable (such as "100px" or "#eeeeee"). In addition to strings (a string with only letters, which we will explain more in depth in future tutorials), you can also pass in numbers (which may be interpreted as px in most cases) or variables without quotation marks:
Reference code:
Copy the codeThe code is as follows:
// This sets the value of the variable firstBackgroundColor to string (STRING) '#eeeeee'
var firstBackgroundColor = '#eeeeee';
// You can pass one variable to another variable
// This makes the value of the variable backgroundColor also equal to the string (string) '#eeeeee'
var backgroundColor = firstBackgroundColor;
// This sets the value of the variable divWidth to a number (NUMBER) 500
var divWidth = 500;
$('body_wrap').setStyles({
// In this case, the variable name does not need to be surrounded by quotes
'width': divWidth,
// The same is true for numbers, no quotation marks are required
'height': 1000,
// Another variable
'background-color': backgroundColor,
// A string is a string composed of a series of characters enclosed in single quotes
'color': 'black'
});
.getStyles();
This method allows you to obtain multiple style attributes at once. This is slightly different from what we see above, because it contains multiple data sets, each with a key (key, attribute name) and a value (value, attribute value). This dataset is called an object, and the .getStyles(); method can easily put multiple attribute values into these objects and can easily retrieve them.
Reference code:
Copy the codeThe code is as follows:
// First define a variable for your object
// Then create a selector
// Then add .getStyles to your selector
// Then create a comma-separated list of style attributes
// Make sure each property is in a single quote
var bodyStyles = $('body_wrap').getStyles('width', 'height', 'background-color');
// First we create an object to save this property value
// Then we get a value by the specified attribute name (key)
// Put the attribute name between two square brackets []
// Make sure the attribute name is enclosed in single quotes
var bgStyle = bodyStyles['background-color'];
If there is such a style definition in our CSS file:
Reference code:
Copy the codeThe code is as follows:
#body_wrap {
width: 1000px;
height: 1000px;
background-color: #eeeeee;
}
Then the variable bgStyle will contain the value "#eeeeee".
Note: If you want to get a separate property from your stylesheet object, first get an object variable (in this example "bodyStyles"), then use square brackets and single quotes (['']), and finally fill in the property name key (such as width or background-color). It's that simple!
Code Example
In this example, we will use some of the methods we just learned above to get and set styles. While paying attention to the usage of style attribute operations, you should also pay special attention to its own structure. In order to separate our functions from domready, we need to pass those variables into the function of the domready event. We achieve this by passing a parameter to the function in domready. Note that click event uses anonymous method - this allows us to pass variables from the domready event to an outside function. If you don't understand it for the first time, please don't worry. The following examples may make these more clear and clearer:
Reference code:
Copy the codeThe code is as follows:
// Here are some functions
// Note that this function has a parameter: "bgColor"
// This is passed from the domready event
var seeBgColor = function(bgColor) {
alert(bgColor);
}
var seeBorderColor = function(borderColor) {
alert(borderColor);
}
// We pass playDiv to this function so that we can operate this element
// It also allows us to avoid repeated use of selectors
// Useful when dealing with complex selectors
var seeDivWidth = function(playDiv) {
// We start getting the style attributes again
// It is independent from the getStyles we use in domready
// Because we want to use the current value
// This can keep width accurate
// Even if it is changed after the domready event
var currentDivWidth = ('width');
alert(currentDivWidth);
}
var seeDivHeight = function(playDiv) {
var currentDivHeight = ('height');
alert(currentDivHeight);
}
var setDivWidth = function(playDiv) {
('width', '50px');
}
var setDivHeight = function(playDiv) {
('height', '50px');
}
// Note that at this time, this variable can take any name
// It will pass any value, value or element or anything of your
// It will replace anything that comes from domready
var resetSIze = function(foo) {
({
'height': 200,
'width': 200
});
}
('domready', function() {
// Because we have to use this selector multiple times, we assign it to a variable
var playDiv = $('playstyles');
// Here we create an object containing several attributes
var bodyStyles = ('background-color', 'border-bottom-color');
// You can get the style value by calling the attribute name and then pass it to a variable
var bgColor = bodyStyles['background-color'];
// Here we use an anonymous function, so we can pass parameters to functions outside domready
$('bgcolor').addEvent('click', function(){
seeBgColor(bgColor);
});
$('border_color').addEvent('click', function(){
// In addition to passing a style attribute to a variable
// You can also call it directly here
seeBorderColor(bodyStyles['border-bottom-color']);
});
$('div_width').addEvent('click', function(){
seeDivWidth(playDiv);
});
$('div_height').addEvent('click', function(){
seeDivHeight(playDiv);
});
$('set_width').addEvent('click', function(){
setDivWidth(playDiv);
});
$('set_height').addEvent('click', function(){
setDivHeight(playDiv);
});
$('reset').addEvent('click', function(){
resetSIze(playDiv);
});
});
Here is the HTML code:
Reference code:
Copy the codeThe code is as follows:
<div > </div>
<br />
<button >See background-color</button>
<button >See border-bottom-color</button><br /><br />
<button >See width</button>
<button >See height</button><br /><br />
<button >Set weight to 50px</button>
<button >Set height to 50px</button><br /><br />
<button >Reset size</button>
Here is the CSS code
Reference code:
Copy the codeThe code is as follows:
#playstyles {
width: 200px
height: 200px
background-color: #eeeeee
border: 3px solid #dd97a1
}
More learning...
Download a zip package containing what you need to start with
Contains MooTools 1.2 core library, an external JavaScript file, a simple HTML page, and a CSS file.
More about stylesheets
To learn more about stylesheets, please refer to the MooTools documentationpart.