Home > Article > Web Front-end > js CSS operation method collection_javascript skills
//Function to get the real, final CSS style attribute value of the element
function getStyle(elem,name){
if(elem.style[name]){
return elem.style[name] ;
}else if(elem.currentStyle){
return elem.currentStyle[name];
}else if(document.defaultView && document.defaultView.getComputedStyle){
name = name.replace (/([A-Z])/g,"-$1");
name = name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem,"");
return s && s.getPropertyValue(name);
}else{
return null;
}
}
//Two determine the X and Y position of the element relative to the entire document Auxiliary position
function pageX(elem){
return elem.offsetParent?
elem.offsetLeft pageX(elem.offsetParent):
elem.offsetLeft;
}
function pageY(elem){
return elem.offsetParent?
elem.offsetTop pageY(elem.offsetParent):
elem.offsetTop;
}
//Determine the position of the element relative to its parent Two functions
function parentX(elem){
return elem.parentNode == elem.offsetParent?
elem.offsetLeft:
pageX(elem)-pageX(elem.parentNode);
}
function parentY(elem){
return elem.parentNode==elem.offsetParent?
elem.offsetTop:
pageY(elem)-pageY(elem.parentNode);
}
//Determine the position of the element relative to its CSS container
function posX(elem){
return parseInt(getStyle(elem,"left"));
}
function posY(elem){
return parseInt(getStyle(elem, "top"));
}
//Function to set the x and y position of the element (independent of the current position)
function setX( elem,pos){
elem.style.left = pos "px";
}
function setY(elem,pos){
elem.style.top = pos "px";
}
//Function to adjust the distance of an element relative to its current position
function addX(elem,pos){
setX(posX(elem) pos);
}
function addY( elem,pos){
setY(posY(elem) pos);
}
//Get the current height and width of the element
function getHeight(elem){
return parseInt (getStyle(elem,'height'));
}
function getWidth(elem){
return parseInt(getStyle(elem,'width'));
}
//That is Two functions that hide an element and obtain its potential full height and width respectively
function fullHeight(elem){
if(getStyle(elem,'display')!='none'){
return elem.offsetHeight||getHeight(elem);
}
var old = resetCSS(elem,{
display:'',
visibility:'hidden',
position:' absolute'
});
var h = elem.clientHeight||getHeight(elem);
restoreCSS(elem,old);
return h;
}
function fullWidth(elem){
if(getStyle(elem,'display')!='none'){
return elem.offsetWidth || getWidth(elem);
}
var old = resetCSS(elem,{
display:'',
visibility:'hidden',
position:'absolute'
});
var w = elem.clientWidth || getWidth(elem );
restoreCSS(elem,old);
return w;
}
function resetCSS(elem,prop){
var old = [];
for( var i in prop){
old[i] = elem.style[i];
elem.style[i] = prop[i];
}
return old;
}
function restoreCSS(elem,prop){
for(var i in prop){
elem.style[i] = prop[i];
}
}
// A set of functions that use the display property of CSS to switch the visibility of elements
function hide(elem){
var curDisplay = getStyle(elem,'display');
if(curDisplay != 'none') {
elem.$oldDisplay= curDisplay;
}
elem.style.display = 'none';
}
function show(elem){
elem.style.display = elem.$oldDisplay ||'';
}
//Set the transparency of the element
function setOpacity(elem,level){
if(elem.filters){
elem .style.filters = 'alpha(opacity=' level ')';
}else{
elem.style.opacity = level/100;
}
}