This is the 8th day of my participation in Gwen Challenge

Today I’ve put together 12 front-end tips for you that you often use at work.

1. A line of CSS text is not hidden

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
Copy the code

2, CSS multi-line text overflow hiding

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
Copy the code

3. The scroll bar of IOS mobile phone container does not slide smoothly

overflow: auto;
-webkit-overflow-scrolling: touch;
Copy the code

4. Modify the scroll bar style

Hide the scroll bar for the div element

div::-webkit-scrollbar {
    display: none;
}
Copy the code

5. Solve the problem that ios Audio/Video cannot automatically play and loop playback

// Fix the problem that ios Audio cannot automatically play and loop playback
var music = document.getElementById('video');
var state = 0;

document.addEventListener('touchstart'.function(){
    if(state==0){
        music.play();
        state=1; }},false);

document.addEventListener("WeixinJSBridgeReady".function () {
    music.play();
}, false);
// Loop
music.onended = function () {
    music.load();
    music.play();
}
Copy the code

6. Remove the problem of 3 pixels at the bottom of the picture

img { 
    vertical-align:middle
}
Copy the code

7, contenteditable

contenteditable="true"Labels can be made editable. <div contenteditable="true"></div>
Copy the code

8. The calc() method in CSS

This property ADAPTS to an adaptive layout.

div {
    width: calc(50% - 20px);
}
Copy the code

Parse the GET parameter

The replace method is used to get the parameter key-value pairs in the URL and quickly parse the GET parameters.

const q = {};
location.search.replace(/([^?&=]+)=([^&]+)/g.(_,k,v) = >q[k]=v);
console.log(q);
Copy the code

Parse the connection URL

Create a tag, assign href attribute to a tag, get protocol, Pathname, Origin and other location object attributes.

// Create a tag
const aEle = document.createElement('a');
// Assign the href path to the a tag
aEle.href = '/test.html';
// Access attributes in aEle
aEle.protocol; // Get the protocol
aEle.pathname; / / get the path
aEle.origin;
aEle.host;
aEle.search;
Copy the code

11. Hide page elements

Display-none: Element does not exist, remove opacity- from the DOM0: Element transparency will be0, but the element still exists, and the bound event is still valid and can trigger execution. Visibility -hidden: The element is hidden, but it still exists and cannot be triggered in the page.Copy the code

12. Four common ways to cross domains

- JSONp is a way to send cross-domain requests by using script tags. - CORS Cross-domain resource sharing: You only need to add an Access-Control-Allow-Origin response header when the requested server responds, indicating whether the resource allows the specified domain request. - Nginx reverse proxy: it does not need the target server, but requires you to set up a forwarding Nginx server for forwarding requests. - NodeJS middleware proxy across domains: Node middleware implements cross-domain proxy, which is roughly the same as nginx. It starts a proxy server to forward data. It can also modify the domain name in the cookie in the response header by setting the cookieDomainRewrite parameter to implement cookie writing in the current domain, facilitating interface login authentication.Copy the code