In the Mootools 1.2 tutorial, set and obtain style table attributes

Welcome to the seventh lecture of this series of tutorials. Today, let's take a look at how to operate styles through MooTools 1.2 and the content we 've talked about earlier. This will give you great control over the UI. Processing style is very simple, but today we have to make some adjustments. For example, we want to introduce the key-value pair object. We will also talk about passing variables out of domready, just as we learned in the lecture about functions. Starting from here, we will gradually increase the difficulty and introduce some necessary programming concepts. If you are a beginner in JavaScript or learn MooTools for the first time, make sure that you understand the previous tutorial and you can ask me any questions at will.
Basic Method
. SetStyle ();
This function allows you to set the style attribute of an element. We have used it in some previous examples. All you need to do is put it after your selector, then it will change the style attributes of one or more elements.
Reference code:
Copy codeThe Code is as follows:
// Define your Selector
// Add the. setStyle Method
// Specify the style attributes and values
$ ('Body _ wrap '). setStyle ('background-color',' # eeeeeee ');
$ ('. Class_name'). setStyle ('background-color', '# eeeeee ');

Reference code:
Copy codeThe Code is as follows:
<Div id = "body_wrap">
<Div class = "class_name"> </div>
<Div class = "class_name"> </div>
<Div class = "class_name"> </div>
<Div class = "class_name"> </div>
</Div>

. GetStyle ();
Similarly, this method is equivalent to its literal meaning .. GetStyle (); returns an attribute value of an element.
Reference code:
Copy codeThe Code is as follows:
// First, create a variable to save the style property value
Var styleValue = $ ('body _ wrap '). getStyle ('background-color ');

If we run this code in the preceding example, it returns "# eeeeee" to the variable styleValue.
Set and obtain attributes of multiple Style Sheets
. SetStyles ();
. SetStyles (); as you think, you can set multiple attribute values for an element or an element array at a time. To set the attribute values of multiple style sheets at the same time, the syntax of. setStyles (); is slightly different.
Reference code:
// Start with your selector and Add. setStyles ({
Copy codeThe Code is as follows:
$ ('Body _ wrap '). setStyles ({
// The following format is: 'properties': 'value ',
'Width': '1000px ',
'Height': '1000px ',
// Note: The last attribute does not contain commas (,).
// If there is a comma, it cannot be cross-browser
'Background-color': '# eeeeeee'
});

Note: In fact, attribute selectors do not require single quotation marks unless the property name has a connector "-". For example, in "background-color", to keep it simple, it is easier to add single quotes to each attribute selector.
At the same time, note that the attribute values may be more flexible and variable (for example, "100px" or "# eeeeee "). Apart from strings (a letter-only string, we will explain this in more detail in future tutorials ), you can also input numbers (which may be interpreted as px in most cases) or variables without quotation marks:
Reference code:
Copy codeThe Code is as follows:
// Set the value of the variable firstBackgroundColor to STRING '# eeeeee'
Var firstBackgroundColor = '# eeeeee ';
// You can pass a variable to another variable
// This makes the value of the variable backgroundColor equal to the string '# eeeeeee'
Var backgroundColor = firstBackgroundColor;
// Set the divWidth value to NUMBER 500.
Var divWidth = 500;
$ ('Body _ wrap '). setStyles ({
// In this case, variable names do not need to be enclosed by quotation marks
'Width': divWidth,
// Numbers are the same and do not need to be enclosed by quotation marks
'Height': 1000,
// Another variable
'Background-color': backgroundColor,
// A string is a string consisting of a series of characters enclosed by single quotes.
'Color': 'black'
});

. GetStyles ();
This method allows you to obtain multiple style attributes at a time. This is slightly different from what we see above, because it contains multiple datasets, each of which has a key (key, attribute name) and a value (value, attribute value ). This dataset is called an object. getStyles (); The method can easily put multiple attribute values into these objects and retrieve them easily.
Reference code:
Copy codeThe Code is as follows:
// Define a variable for your object
// Create a selector
// Add. getStyles to your selector.
// Create a list of style attributes separated by commas
// Make sure that each attribute is in a single quotation mark
Var bodyStyles = $ ('body _ wrap '). getStyles ('width', 'height', 'background-color ');
// First, create an object to save the attribute value.
// Then we get a value through the name (key) of the specified attribute
// Place the attribute name between two square brackets []
// Make sure that the attribute name has been enclosed in single quotes
Var bgStyle = bodyStyles ['background-color'];

If there is such a style definition in our CSS file:
Reference code:
Copy 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 obtain a separate attribute from your style sheet object, first obtain an object variable (in this example, it is "bodyStyles "), then use square brackets and single quotes (['']), and enter the attribute name key (such as width or background-color ). That's easy!
Sample Code
In this example, we will use the methods we learned above to obtain and set styles. Pay special attention to its own structure while paying attention to the style attribute operation usage. To separate our functions from domready, we need to pass those variables to the functions of the domready event. We can implement this by passing a parameter to the function in domready. Note that the click event uses the anonymous method -- this allows us to pass the variable from the domready event to the function outside. If you do not understand it for the first time, do not worry. The following example may make it clearer and clearer:
Reference code:
Copy 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 to operate this element.
// You can also avoid repeated selector usage.
// Useful when processing complex selectors
Var seeDivWidth = function (playDiv ){
// Let's get the style attributes again
// It is independent of the getStyles we use in domready.
// Because we want to use the current value
// This ensures that the width is accurate.
// Even if it is changed after the domready event
Var currentDivWidth = playDiv. getStyle ('width ');
Alert (currentDivWidth );
}
Var seeDivHeight = function (playDiv ){
Var currentDivHeight = playDiv. getStyle ('height ');
Alert (currentDivHeight );
}
Var setDivWidth = function (playDiv ){
PlayDiv. setStyle ('width', '50px ');
}
Var setDivHeight = function (playDiv ){
PlayDiv. setStyle ('height', '50px ');
}
// Note that at this time, this variable can take any name
// It will pass any value, value, element, or anything
// It will replace anything passed in domready
Var resetSIze = function (foo ){
Foo. setStyles ({
'Height': 200,
'Width': 200
});
}
Window. addEvent ('domainready', function (){
// Because we need to use this selector multiple times, we assign it to a variable.
Var playDiv = $ ('playstyles ');
// Here we create an object that contains several attributes
Var bodyStyles = playDiv. getStyles ('background-color', 'border-bottom-color ');
// You can call the attribute name to obtain the style value and pass it to a variable.
Var bgColor = bodyStyles ['background-color'];
// Here we use an anonymous function, so that we can pass the parameter to the function outside domready.
$ ('Bgcolor'). addEvent ('click', function (){
SeeBgColor (bgColor );
});
$ ('Border _ color'). addEvent ('click', function (){
// Apart from passing a style attribute to a variable
// You can also directly call
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 codeThe Code is as follows:
<Div id = "playstyles"> </div>
<Br/>
<Button id = "bgcolor"> See background-color </button>
<Button id = "border_color"> See border-bottom-color </button> <br/>
<Button id = "div_width"> See width </button>
<Button id = "div_height"> See height </button> <br/>
<Button id = "set_width"> Set weight to 50px </button>
<Button id = "set_height"> Set height to 50px </button> <br/>
<Button id = "reset"> Reset size </button>

Here is the CSS code
Reference code:
Copy codeThe Code is as follows:
# Playstyles {
Width: 200px
Height: 200px
Background-color: # eeeeee
Border: 3px solid # dd97a1
}

Learn more...

Download a zip package containing what you need

Contains the core library of MooTools 1.2, an external JavaScript file, a simple HTML page, and a CSS file.