js CSS operation method collection_javascript skills
May 16, 2016 pm 06:59 PM//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;
}
}

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Autoprefixer is a tool that automatically adds vendor prefixes to CSS attributes based on the target browser scope. 1. It solves the problem of manually maintaining prefixes with errors; 2. Work through the PostCSS plug-in form, parse CSS, analyze attributes that need to be prefixed, and generate code according to configuration; 3. The usage steps include installing plug-ins, setting browserslist, and enabling them in the build process; 4. Notes include not manually adding prefixes, keeping configuration updates, prefixes not all attributes, and it is recommended to use them with the preprocessor.

AnimatingSVGwithCSSispossibleusingkeyframesforbasicanimationsandtransitionsforinteractiveeffects.1.Use@keyframestodefineanimationstagesforpropertieslikescale,opacity,andcolor.2.ApplytheanimationtoSVGelementssuchas,,orviaCSSclasses.3.Forhoverorstate-b

Theconic-gradient()functioninCSScreatescirculargradientsthatrotatecolorstopsaroundacentralpoint.1.Itisidealforpiecharts,progressindicators,colorwheels,anddecorativebackgrounds.2.Itworksbydefiningcolorstopsatspecificangles,optionallystartingfromadefin

Mobile-firstCSSdesignrequiressettingtheviewportmetatag,usingrelativeunits,stylingfromsmallscreensup,optimizingtypographyandtouchtargets.First,addtocontrolscaling.Second,use%,em,orreminsteadofpixelsforflexiblelayouts.Third,writebasestylesformobile,the

There are three ways to create a CSS loading rotator: 1. Use the basic rotator of borders to achieve simple animation through HTML and CSS; 2. Use a custom rotator of multiple points to achieve the jump effect through different delay times; 3. Add a rotator in the button and switch classes through JavaScript to display the loading status. Each approach emphasizes the importance of design details such as color, size, accessibility and performance optimization to enhance the user experience.

The top ten virtual currency trading platforms in Europe in 2025 include Binance, OKX, Coinbase, etc., and are selected based on compliance, security, expenses, asset types and user experience. 1. Binance: The world has the largest transaction volume, low fees, and has obtained a license in multiple countries; 2. OKX: Comprehensive products, strong technology, registered in France; 3. Coinbase: Compliance and safety, suitable for beginners, licensed in many countries; 4. Gate.io: Has a long history, high security, registered in many European countries; 5. Bitstamp: Founded early, has strong compliance, regulated by Luxembourg; 6. eToro: Supports social transactions, diversified investment, regulated by CySEC; 7. Bitpanda: World

FeaturedetectioninCSSusing@supportschecksifabrowsersupportsaspecificfeaturebeforeapplyingrelatedstyles.1.ItusesconditionalCSSblocksbasedonproperty-valuepairs,suchas@supports(display:grid).2.Thismethodensuresfuturecompatibilityandavoidsrelianceonunrel

HTML5, CSS and JavaScript should be efficiently combined with semantic tags, reasonable loading order and decoupling design. 1. Use HTML5 semantic tags, such as improving structural clarity and maintainability, which is conducive to SEO and barrier-free access; 2. CSS should be placed in, use external files and split by module to avoid inline styles and delayed loading problems; 3. JavaScript is recommended to be introduced in front, and use defer or async to load asynchronously to avoid blocking rendering; 4. Reduce strong dependence between the three, drive behavior through data-* attributes and class name control status, and improve collaboration efficiency through unified naming specifications. These methods can effectively optimize page performance and collaborate with teams.
