JavaScript and CSS review (2)_javascript skills

visibility: Toggles the visibility of an element while maintaining its position and space in the normal flow. It has two values: visible (default) and hidden (invisible),
For example:

Copy code The code is as follows:

Hello John, how are you today?

The browser is: Hello John, how are you today? Then after we set the visibility of John's b to hidden, it will become like this
Hello, how are you today?
display: provides us with richer choices for controlling the layout of elements. Can be inline, block, or none (which completely hides the element from the document, resulting in the same appearance as if the element were deleted from the document). Still the above example, if we use display:none. Then the result is
Hello, how are you today?
The following are two simple functions in the book for showing and hiding elements

Copy code The code is as follows:

//Use display to hide elements
function hide(elem) {
//Find out the current state of element display
var curDisplay = getStyle (elem, 'display');
//Record its display status
if(curDisplay != 'none')
elem.$oldDisplay = curDisplay;
//Set display to none
elem.style.display = 'none';
}
//Use display to display elements
function show(elem) {
//Set the display attribute to its original value
elem.style.display = elem.$oldDisplay || ' ';
}

Next let's study the transparency opacity, which can add a very cool effect to the element... Take a look at the function below that sets the transparency of an element.

Copy code The code is as follows:

//Set the transparency of the element (level from 0-100)
function setOpacity(elem, level) {
//If the filters attribute exists, it is IE
if(elem.filters) {
elem.style.filters = 'alpha(opacity=' level ')';
} else { // Otherwise, use W3C's opacity attribute
elem.style.opacity = level / 100;
}
}

Yes With these methods of adjusting the position, size, and visibility of elements, we can combine them to create animations.

Copy code The code is as follows:

function slideDown(elem) {
//Start from 0 height Slide
elem.style.height = '0px';
//Show the element first (but you can’t see it because its height is 0)
show(elem);
//Find The full potential height of the element
var h = fullHeight(elem);
//We perform a 20-frame animation in 1 second
for(var i = 0; i <= 100; i = 5) {
//The closure function that ensures we can maintain the correct 'i'
(function() {
var pos = i;
//Set the timeout so that it can Move at the specified time point
setTimeout(function() {
//Set the new height of the element
elem.style.height = (pos / 100) * h 'px';
}, (pos 1) * 10);
})();
}
}

There is a concept of closure here, which may be difficult to understand. Interested in learning more Friends of the garden can go to Google, so I won’t discuss it here.
Next, use the setOpacity function to write a "fade in" function:

Copy the code The code is as follows:

function fadeIn(elem) {
//Start from 0 transparency
setOpacity(elem, 0);
//Display the element first (but you can’t see it because its transparency is 0)
show(elem);
//We execute a 20-frame animation in 1 second
for(var i = 0; i < 100; i = 5) {
//Guarantee us Closure function that can maintain the correct 'i'
(function(){
var pos = i;
//Set the timeout so that it can run within the specified event
setTimeout(function () {
setOpacity(elem, pos);
}, (pos 1) * 10);
})();
}
}

In order to ensure the correctness of the code, I tested it after writing it because I found some minor errors in the book. I just finished testing the slideDown method above and should put var h = fullHeight(elem); first in the function content. sentence, otherwise it won’t be effective....
That’s it for the review of the second part, digest it slowly, don’t rush to learn something.