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元素时上传碰到两个问题:
- change事件上传一次后失效
- 相同文件只能选择一次(有上传相同文件的需求)
原因
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
});