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;
}
}

Hot AI Tools

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

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

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

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



Create a progress bar using HTML5 or CSS: Create a progress bar container. Set the progress bar width. Create internal elements of the progress bar. Sets the internal element width of the progress bar. Use JavaScript, CSS, or progress bar library to display progress.

In HTML, set H5 table borders through CSS: Introduce a CSS style sheet, style the border using border attributes (including border-width, border-style, and border-color sub-properties), and apply the style to the table elements. In addition, specific border styles can be set, such as border-top, border-right, border-bottom, and border-left.

The steps to create an H5 click icon include: preparing a square source image in the image editing software. Add interactivity in the H5 editor and set the click event. Create a hotspot that covers the entire icon. Set the action of click events, such as jumping to the page or triggering animation. Export H5 documents as HTML, CSS, and JavaScript files. Deploy the exported files to a website or other platform.

Running the H5 project requires the following steps: installing necessary tools such as web server, Node.js, development tools, etc. Build a development environment, create project folders, initialize projects, and write code. Start the development server and run the command using the command line. Preview the project in your browser and enter the development server URL. Publish projects, optimize code, deploy projects, and set up web server configuration.

H5 pop-up window creation steps: 1. Determine the triggering method (click, time, exit, scroll); 2. Design content (title, text, action button); 3. Set style (size, color, font, background); 4. Implement code (HTML, CSS, JavaScript); 5. Test and deployment.

Solutions to H5 compatibility issues include: using responsive design that allows web pages to adjust layouts according to screen size. Use cross-browser testing tools to test compatibility before release. Use Polyfill to provide support for new APIs for older browsers. Follow web standards and use effective code and best practices. Use CSS preprocessors to simplify CSS code and improve readability. Optimize images, reduce web page size and speed up loading. Enable HTTPS to ensure the security of the website.

The Create H5 drop-down menu includes the following steps: Create a drop-down list, apply a CSS style, add toggle effects, and handle user selections. The specific steps are as follows: Use HTML to create a drop-down list. Use CSS to adjust the appearance of the drop-down menu. Use JavaScript or CSS to achieve the switching effect. Listen to change events to handle user selections.

There are two ways to make an H5 progress bar: using HTML progress bar elements and using JavaScript to create a progress bar. The HTML progress bar element method involves creating a progress bar element and setting its maximum and current value, while the JavaScript method includes creating a progress bar container and a function that updates the progress bar.
