1. Override default styles with CSS penetration

Common scenario: Suppose we need to upload a file with input, type=”file”, and the default style of this input is ugly. So we want an image that is the same size as the input and placed on top of it. So at this point, obviously, clicking on the image input at this point is not going to work. Because img blocks click penetration, we want the IMG to just visually block the style of the input, but still click on the input. So, just make img penetrable.

The CSS code is as follows:

img {
  pointer-events: none;
}
Copy the code

2. Implement custom native SELECT control style

Since the Select mobile native style is ugly, the native pop-up effect is consistent with our design principles. When modifying the select style directly, a strange phenomenon occurs. When debugging on Chrome, the custom style works, and it works on Android phones, but not on ios phones. Typical incompatibility issues, this time you can disable the native style.

The CSS code is as follows:

select {
  -webkit-appearance: none;
}
Copy the code

3. Text overflow processing

Mobile devices have relatively small pages, and many times the information displayed needs to be omitted. The most common omissions are single-line headings and multi-line details. Now developed with frameworks, the proposed requirements are proposed to form a basic component, easy and quick.

The CSS code is as follows:

// single {overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } // more {display: -webkit-box! important; overflow: hidden; text-overflow: ellipsis; work-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; // specify the number of lines}Copy the code

4. Enable elastic scrolling

The CSS code is as follows:

body {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
Copy the code

Note: Android doesn’t support native elastic scrolling, but you can use the third-party library iScroll to do it.

5. One-pixel border Settings

A lot of times, you want to keep the border size 1px on all Settings, but because 1px is rendered with 2DP, it will be shown as 2px. So, I’m going to use CSS3 to scale.

The CSS code is as follows:

.folder li {
  position: relative;
  padding: 5px;
}
.folder li + li:before {
  position: absolute;
  top: -1px;
  left: 0;
  content: "";
  width: 100%;
  height: 1px;
  border-top: 1px solid #ccc;
  -webkit-transform: scaleY(0.5);
}
Copy the code

6. Prevent the mouse selection event

<div class="mask" onselectstart="return false"></div>
<div class="link">
  <a href="javascrip;;">The login</a>
</div>
Copy the code

Adding onslectStart =”return false” to the element prevents mouse selection events.

7. Bind events to dynamically added elements

Use time proxies to achieve this effect. Such as:

$(document).on("click".".large", slide); //jq
// The first argument represents the corresponding event, the second is the id or class of the element to which the event is bound, and the third is the name of the corresponding event function to which the event is bound
Copy the code

8. Transparency processing compatible with IE browser

.ui { width: 100%; height: 100%; Opacity: 0.4; filter: Alpha(opacity=40); // Compatible with IE browser processing}Copy the code

9. Commonly used full-screen centered JS functions

// Get the element
function getElement(ele) {
  return document.getElementById(ele);
}
// Automatic center function
function autoCenter(el) {
  var bodyX = document.documentElement.offsetWidth || document.body.offsetWidth;
  var bodyY =
    document.documentElement.offsetHeight || document.body.offsetHeight;

  var elementX = el.offsetWidth;
  var elementY = el.offsetHeight;

  el.style.left = (bodyX - elementX) / 2 + "px";
  el.style.top = (bodyY - elementY) / 2 + "px";
}
Copy the code

10. Common full-screen centered CSS functions

body {
  height: 100vh;
  text-align: center;
  line-height: 100vh;
}
Copy the code

11. Enter the content in the input box and press Enter

For example, when you type 11000 and press Enter.

<input type="textbox" id="textbox1" onkeypress="CheckInfo" />

    <script language="javascript" type="text/javascript">
    function CheckInfo(a)
    {
    if (event.keyCode==13) { alert(textbox1.text); }}</script>
Copy the code

12. Chrome debug shortcuts

① CTRL + Shift + F fulltext search

② CTRL + O to find the file name

CTRL + Shift + O find js function names

The last

  • Welcome to add my wechat (Winty230), pull you into the technology group, long-term exchange learning…
  • Welcome to pay attention to “front-end Q”, seriously learn front-end, do a professional technical people…