Skip to content

1. input设置cursor不起作用

在chrome浏览器中,有时用到type=file上传按钮时,一般需要将鼠标箭头换成手指,但是单独对input标签设置不起作用.

JS
添加css样式:"  font-size:0; ".

2. 小数取整

1.丢弃小数部分,保留整数部分

js:parseInt(7/2)

2.向上取整,有小数就整数部分加1

js: Math.ceil(7/2)

3,四舍五入.

js: Math.round(7/2)

4,向下取整

js: Math.floor(7/2)

3. 获取屏幕宽高

document.body.clientWidth;        //网页可见区域宽(body)

document.body.clientHeight;       //网页可见区域高(body)

document.body.offsetWidth;       //网页可见区域宽(body),包括border、margin等

document.body.offsetHeight;      //网页可见区域宽(body),包括border、margin等

document.body.scrollWidth;        //网页正文全文宽,包括有滚动条时的未见区域

document.body.scrollHeight;       //网页正文全文高,包括有滚动条时的未见区域

document.body.scrollTop;           //网页被卷去的Top(滚动条)

document.body.scrollLeft;           //网页被卷去的Left(滚动条)

window.screenTop;                     //浏览器距离Top

window.screenLeft;                     //浏览器距离Left

window.screen.height;                //屏幕分辨率的高

window.screen.width;                 //屏幕分辨率的宽

window.screen.availHeight;          //屏幕可用工作区的高

window.screen.availWidth;           //屏幕可用工作区的宽

4. 获取元素高度

一般有三种方法:

javascript
document.getElementById("id").style.height //这种方法的前提是必须之前已经显示的在css中声明过height,才能取得正确的值
document.getElementById("id").clientHeight
document.getElementById("id").offsetHeight

5. 上传文件重复上传失效问题

使用input file元素时上传碰到两个问题:

  1. change事件上传一次后失效
  2. 相同文件只能选择一次(有上传相同文件的需求)

原因

input[type=file]使用的是onchange去做,onchange监听的为input的value值,只有再内容发生改变的时候去触发,而value在上传文件的时候保存的是文件的内容,你只需要在上传成功的回调里面,将当前input的value值置空即可。

解决办法

event.target.value=null;

6. preventDefault与stopPropagation

1.event.stopPropagation()方法

这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开,

2.event.preventDefault()方法

这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;

3.return false ;

这个方法比较暴力,他会同时阻止事件冒泡也会阻止默认事件;写上此代码,连接不会被打开,事件也不会传递到上一层的父元素;可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()

7. 监听DIV元素变化

javascript
// 获取元素对象 
  let dom = document.getElementById("el");
  let MutationObserver =
    window.MutationObserver ||
    window.WebKitMutationObserver ||
    window.MozMutationObserver;
  let observer = new MutationObserver(mutationList => {
    //这里是观察到标签样式改变就会执行的函数
    console.log('');
  });
  observer.observe(dom, {
    attributes: true,
    attributeFilter: ["style"],
    attributeOldValue: true,
    childList: true,
    subtree: true
  });