Mootools 1.2 tutorial setting and getting style sheet properties

Welcome to the seventh tutorial in this series. Today, we'll take a look at how to manipulate styles with MooTools 1.2 and what we've learned in previous lectures, which will give you a lot of control over your UI. Working with styles is pretty easy, but today we're going to make a few adjustments. For example, we're going to introduce key-value pair objects. We'll also cover passing variables outside of domready, just like we learned in the lesson about functions. From here, we will slowly increase the difficulty and introduce some necessary programming concepts. If you are new to JavaScript or learning MooTools for the first time, make sure you understand the previous tutorials and feel free to ask me any questions.
Basic methods
.setStyle();
This function allows you to set the style attribute of an element. We have already used this in some previous examples. All you have to do is put it after your selector and it will change the style properties of an element or elements.
Reference code:

Copy code The code is as follows:

// Define your choice Container
//Add .setStyle method
//Specify style attributes and values
$('body_wrap').setStyle('background-color', '#eeeeee'); 
$$( '.class_name').setStyle('background-color', '#eeeeee'); 

Reference code:

Copy code The code is as follows:

.getStyle();
Again, this method does exactly what it sounds like. .getStyle(); will return an attribute value of an element.
Reference code:

Copy code The code is as follows:

// First, create a Variable to hold this style attribute value 
var styleValue = $('body_wrap').getStyle('background-color'); 

If we run this code in the above example, then It will return "#eeeeee" to the variable styleValue.
Set and get multiple style sheet attributes
.setStyles();
.setStyles(); As you can imagine, it allows you to set multiple attributes to an element or an array of elements at one time value. In order to be able to set multiple style sheet property values at the same time, the syntax of .setStyles(); is slightly different.
Reference code:
// Still start with your selector, and then add .setStyles({

Copy code The code is as follows:

$('body_wrap').setStyles({ 
// The following format is: 'property': 'value', 
'width' : '1000px', 
'height': '1000px', 
// Special note: the last attribute does not have a comma 
// If there is a comma, it will not work across browsers 
'background-color ': '#eeeeee' 
}); 

Note: In fact, the attribute selector does not need single quotes, unless there is a connector "-" in the attribute name, such as in " "background-color", to keep it simple, it's easier to put single quotes around each attribute selector.
Also note: attribute values may be more flexible (such as "100px" or "#eeeeee "). In addition to strings (a string of just letters, we'll cover this in more depth in future tutorials), you can also pass in numbers (which will probably be interpreted as px in most cases) or variables instead No quotation marks required:
Reference code:

Copy code The code is as follows:

// This sets the value of the variable firstBackgroundColor to the string (STRING) '#eeeeee' 
var firstBackgroundColor = '#eeeeee'; 
// You can pass one variable to another Variable 
 // This makes the value of the variable backgroundColor 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 goes for numbers, no need to surround them with quotes 
'height': 1000, 
// Another variable 
'background-color': backgroundColor, 
// The string is used A string consisting of a series of characters enclosed in single quotes 
'color': 'black' 
}); 

.getStyles();
This method allows you to Get multiple style properties. This one is slightly different from what we saw above, because it contains multiple data sets, each data set has a key (key, attribute name) and a value (value, attribute value). This data set is called an object, and the .getStyles(); method makes it easy to put multiple property values into these objects and get them back easily.
Reference code:

Copy code The code is as follows:

// First for your Object defines a variable 
// Then creates a selector 
// Then adds .getStyles to your selector 
// Then creates a comma separated list of style properties 
/ / Make sure each attribute is in a single quote 
var bodyStyles = $('body_wrap').getStyles('width', 'height', 'background-color'); 
// First we create a Object to save this attribute value
// Then we get a value by the name (key) of the specified attribute
// Put the attribute name between two square brackets []
// And Make sure the property name is enclosed in single quotes 
var bgStyle = bodyStyles['background-color']; 

If we have this style definition in our CSS file:
Reference code:

Copy code The 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 an individual property from your stylesheet object, first get an object variable (in this case "bodyStyles"), then use square brackets and single quotes (['']) , and finally fill in the attribute 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 function from domready, we need to pass those variables into the domready event function. We do this by passing a parameter to the function in domready. Note that the click event uses an anonymous method - this allows us to pass variables from the domready event to the external function. If you don’t understand it the first time, please don’t worry, the following examples may make it clearer:
Reference code:

Copy code The code is as follows:

// Here are some functions 
// Note that this function has one 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, This allows us to manipulate this element 
// and also allows us to avoid using selectors repeatedly 
// which is useful when dealing with complex selectors 
var seeDivWidth = function(playDiv) { 
// We start getting the style properties again 
// independently of the getStyles we used in domready 
// because we want to use the current value 
// This keeps the width accurate 
/ / Even if it was 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 You can take any name
// It will pass any value, value or element or anything of yours
// It will replace anything passed in domready
var resetSIze = function(foo) { 
foo.setStyles({ 
'height': 200, 
'width': 200 
}); 
} 
window.addEvent('domready', function() { 
// Because we need to use this selector multiple times, we assign it to a variable 
var playDiv = $('playstyles'); 
// Here we create a variable containing several The object of the attribute 
var bodyStyles = playDiv.getStyles('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 that we can pass parameters to the function outside domready 
$('bgcolor').addEvent(' click', function(){ 
seeBgColor(bgColor); 
}); 
$('border_color').addEvent('click', function(){ 
// In addition to adding a The style attribute is passed to a variable 
// You can also call 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 code The code is as follows:

< ;br />

< ;br />

Here is the CSS code
Reference code:

Copy code The code is as follows:

#playstyles { 
width: 200px 
height: 200px 
background-color: #eeeeee 
border: 3px solid #dd97a1 
} 

Learn more...

Download a zip package containing everything you need to get started

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

More about style sheets

To learn more about style sheets, check out the Element.Style section in the MooTools documentation.

Mootools 1.2 tutorial setting and getting style sheet properties_Mootools

Learn more...