Get inline style
function getStyle(obj,attr){
//获取非行间样式，obj是对象，attr是值
if(obj.currentStyle){
//针对ie获取非行间样式
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; //针对非ie
}
}
Compatible ways to obtain event objects
document.onclick=function(eve){
var e=eve || window.event;
console.log(e);
}
Compatible methods for event bubbling
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;//兼容ie
}
}
Compatible methods to prevent browser default behavior
if( e.preventDefault ){
e.preventDefault();
}else{
window.event.returnValue = false;//ie
}
Compatible ways of setting and removing monitoring events
// obj为dom对象 inci为事件名称 比如click back为回调函数
// attachEvent 是老版本浏览器使用的添加事件的方法，现在统一使用addEventListener
function addEvent(obj,inci,back){
if(obj.addEventListener){
obj.addEventListener(inci,back);
}else if(obj.attachEvent){
obj.attachEvent("on" + inci,back);
}else{
obj["on"+inci] = back;
}
}
// obj为dom对象 inci为事件名称 比如click back为回调函数
function removeEvent(obj,inci,back){
if(obj.removeEventListener){
obj.removeEventListener(inci,back,false);
}else if(obj.detachEvent){
obj.detachEvent("on" + inci,back);
}else{
obj["on"+inci] = null;
}
}
The key value of the keyboard event
// ie浏览器使用window.event.which
var eve = eve || window.event;
var keyC = eve.keyCode || eve.which;
Time format
Use YYYY/MM/DD HH:mm:ss
as much as possible because safari browser only supports YYYY/MM/DD HH:mm:ss format, not YYYY-MM-DD HH:mm:ss
"2016-06-10 12:00:00".split('-').join('/')
Get the height of the scroll bar
function onscroll(){
const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
return scrollTop
}
The problem with innerText
Problem description: innerText works normally in IE, but innerText does not work in FireFox.
Solution: Use textContent instead of innerText in non-IE browsers.
function setInnerText(dom,text) {
if(navigator.appName.indexOf("Explorer") >-1){
dom.innerText = text;
} else{
dom.textContent = text;
}
}
Try not to use setAttribute()
Using setAttribute to set the attributes of style and onclick does not work in IE. In order to achieve the effect of being compatible with various browsers, you can use the dot notation method to set the object properties, collection properties and event properties of the Element.
const dom = document.getElementById('element');
dom.style.color = "#00f";
Set the class name
function AddClass(vName) {
element.setAttribute("class", vName);
element.setAttribute("className", vName); //for IE
}
input.type attribute problem
In the IE browser, input.type is a read-only attribute and cannot be modified. If you want to modify it, finally remove the original input element and add a new input element
Object width and height assignment problem
Description of the problem: The statement similar to obj.style.height = imgObj.height in FireFox is invalid.
Solution: use obj.style.height = imgObj.height +'px';
Get dom by id
Problem description: In IE, you can use eval("idName") or getElementById("idName") to get the HTML object whose id is idName; in Firefox, you can only use getElementById("idName") to get the HTML object whose id is idName .
Solution: Use getElementById("idName") to get the HTML object whose id is idName.
Event.x and event.y issues
Problem description: Under IE, the even object has x and y attributes, but does not have pageX and pageY attributes; under Firefox, the even object has pageX and pageY attributes, but does not have x and y attributes.
var myX = event.x ? event.x : event.pageX;
var myY = event.y ? event.y : event.pageY;
Get dom parent element
Under IE, use obj.parentElement or obj.parentNode to access the parent node of obj; under firefox, use obj.parentNode to access the parent node of obj.
const children = document.getElementsByClassName('children')[0];
const parent = children.parentNode
Access and set the data in the clipboard
To access the data in the clipboard, you can use the clipboardData object: in IE, this object is a property of the window object; in Firefox, Chrome, and Safar, this object is a property of the event object.
const setClipboardText = function (event, value) {
if (event.clipboardData) {
return event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData) {
return window.clipboardData.setData("text", value);
}
};
const getClipboardText = function (event) {
const clipboardData = event.clipboardData || window.clipboardData;
return clipboardData.getData("text");
};