Author: Yin Dong, link: juejin.cn/post/689816…

  1. CSS one line of text beyond…
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
Copy the code

2. Multiple lines of text beyond display…

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

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

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

4. Modify the scroll bar style

div::-webkit-scrollbar {
    display: none;
}
Copy the code
  • div::-webkit-scrollbarScroll bar as a whole
  • div::-webkit-scrollbar-thumbSmall squares inside the scrollbar can move up and down (or left and right, depending on whether the scrollbar is vertical or horizontal
  • div::-webkit-scrollbar-trackThe track of the scroll bar (which contains Thumb)
  • div::-webkit-scrollbar-buttonThe scroll bar tracks the buttons at both ends, allowing fine tuning of the position of the small square by clicking
  • div::-webkit-scrollbar-track-pieceInner track, middle part of scroll bar (remove
  • div::-webkit-scrollbar-cornerCorner, that is, the intersection of two scroll bars
  • div::-webkit-resizerNote that this scheme has compatibility issues. Generally, when I need to hide the scrollbar, I use a color block to cover it by positioning, or I make the child element larger, and the parent element uses overflow-hidden to cut off the scrollbar. Violent and direct.

5. Use the CSS to write a triangle corner element with width and height set to 0. Use the border property to set the color of the other three directions to transparent or consistent with the background color, and set the color of the remaining border to the desired color.

div {
    width: 0;
    height: 0;
    border: 5px solid #transparent;
    border-top-color: red;
}
Copy the code

6. To solve the problem that ios Audio cannot automatically play or loop play, some ios phones cannot automatically play audio or video. You can use the following code hack.

Var music = document.getelementbyid ('video'); 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); Music.onended = function () {music.load(); music.play(); }Copy the code

7. Center horizontally and vertically

I usually only use two ways to locate or Flex, and I think that’s enough.

div {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
Copy the code

The parent control subset is centered

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
Copy the code

8. Hide page elements

  • display-none: element does not exist, removed from DOM
  • opacity-0: Element transparency will be 0, but the element will still exist, and the bound event will still be valid and trigger execution.
  • visibility-hidden: The element is hidden, but the element still exists, and the page cannot fire the event for that element.

9.contenteditable

Most tags in HTML are not editable, but with the addition of the contenteditable property, they become editable.

<div contenteditable="true"></div>
Copy the code

However, when you put the tag into editable state with this attribute, there is only an input event, not a change event. You can’t control the maximum length by maxLength as you can on a form.

10.calc

This is a CSS property, which I usually call a CSS expression. You can calculate the CSS value. The most interesting thing was that he could calculate the difference between different units. A very useful feature, the disadvantage is that it is not easy to read.

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

11. The difference between Proxy and Object.defineProperty

Proxy means Proxy, and I usually teach him that interceptors can intercept an operation on an object. The usage is as follows: create an object by new, the first parameter is the object to be intercepted, and the second parameter is the description of the object operation. Instantiation returns a new object, and when we operate on this new object we call the corresponding method in our description.

new Proxy(target, {
    get(target, property) {

    },
    set(target, property) {

    },
    deleteProperty(target, property) {

    }
})
Copy the code

Proxy differs from Object.definedProperty. Object.defineproperty can only listen to read and write of attributes, while Proxy can also listen to delete attributes and call methods in addition to read and write. In general, if you want to monitor array changes, you basically override array methods, which is how Vue does it, and Proxy can monitor array changes directly.

const list = [1, 2, 3]; const listproxy = new Proxy(list, { set(target, property, value) { target[property] = value; return true; }}); list.push(4);Copy the code

Proxy regulates the read and write of objects in a non-intrusive manner, while defineProperty needs to define the attributes of objects in a specific way.

12. Parse the GET argument

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
  1. Parse the connection URL

You can obtain the protocol, PathName, Origin and other attributes on location objects by creating a tag and assigning href attribute to a tag.

Const aEle = document.createElement('a'); Href path aEle. Href = '/test.html'; // Access the attribute aEle. Protocol; // Get protocol aEle. Pathname; // Get path ael.origin; aEle.host; aEle.search;Copy the code