獲取滾動條的滾動距離

function getScrollOffset(){
if(window.pageXOffset){
return {
x:window.pageXOffset,
y:window.pageYOffset
}
}else{
return {
x:document.body.scrollLeft + document.documentElement.scrollLeft,
y:document.body.scrollTop + document.documentElement.scrollTop
}
}
}

獲取瀏覽器視口尺寸

function getViewportOffset(){
if(window.innerWidth){
return {
w : window.innerWidth,
h : window.innerHeight
}
}else{
if(document.compatMode === “BackCompat”){//怪異盒模型
return {
w : document.body.clientWidth,
h : document.body.clientHeight
}
}else{
return {
w : document.documentElement.clientWidth,
h : document.documentElement.clientHeight
}
}
}
}

獲取樣式的方法

function getStyle(elem,prop){
if(window.getComputedStyle){
return window.getComputedStyle(elem,null)[prop];
}else{
return elem.currentStyle[prop];
}
}

監聽事件的相容寫法

function addEvent(elem,type,handle){
if(elem.addEventListener){
elem.addEventListener(type,handle,false)
}else if(elem.attachEvent){
//相容ie
elem.attachEvent(‘on’+type,function(){
handle.call(elem)
})
}else{
elem[‘on’+type] = handle;
}
}

取消事件冒泡

function stopBubble(event){
if(event.stopPropagetion){
event.stopPropagetion();
}else{
event.cancelBubble = true
}
}

阻止預設事件

function cancelHandle(event){
if(event.preventDefault){
event.preventDefault()
}else{
event.returnValue = false;
}
}

非同步載入檔案並呼叫方法

function loadScript(url,callback){
var script = document.createElement(‘script’)
script.type = “text/javascript”
if(script.readyState){
script.onreadystatechange = function(){//ie
if(script.readyState == ‘complete’ || script.readyState == ‘loaded’){
callback();
}
}
}else{
script.onload = function(){
callback();
}
}
script.src = url;
document.head.appendChild(script)
}
//呼叫方法 loadScript('demo.js,function(){
// test()
// })
/**

• 通過class名和標籤名獲取css樣式物件組
  /
  function getClassNames(classStr, tagName){
  if (document.getElementsByClassName) {
  return document.getElementsByClassName(classStr)
  } else {
  //為了相容ie8及其以下版本的方法
  var nodes = document.getElementsByTagName(tagName), ret = [];
  for (i = 0; i < nodes.length; i++) {
  if (hasClass(nodes[i], classStr)) {
  ret.push(nodes[i]);
  }
  }
  return ret;
  }
  }
  /*
• 判斷節點class存在性
  */
  function hasClass(tagStr, classStr){
  //這個正則表示式是因為class可以有多個,判斷是否包含
  var arr = tagStr.className.split(/\s+/);//等同於split(" ")
  for ( var i = 0; i < arr.length; i++) {
  if (arr[i] == classStr) {
  return true;
  }
  }
  return false;
  }

在js中,之前我們獲取屬性大多用的都是ele.style.border這種形式的方法,但是這種方法是有侷限性的,該方法只能獲取到行內樣式,獲取不了外部的樣式.所以呢下面我就教大家獲取外部樣式的方法,因為獲取外部的樣式存在相容性的問題,所以後面我還會教大家解決相容性的方法.

style:各大瀏覽器都相容,能設定樣式和獲取樣式,但是獲取不了外部樣式,如果寫了行內沒有的樣式,返回的是空值

寫法:ele.style.attr(這樣為獲取),ele.style.attr=“值”;

currentStyle屬性和getComputedStyle屬性不能設定屬性,只能獲取

currentStyle:該屬性只相容IE,不相容火狐和谷歌

寫法:ele.currentStyle[“attr”]或者ele.currentStyle.attr;

getComputedStyle:該屬性是相容火狐谷歌,不相容IE

寫法:window.getComputedStyle(ele,null)[attr]獲取是window.getComputedStyle(ele,null).attr

下面我就貼上我的程式碼:

複製程式碼
var div=document.getElementsByTagName(“div”)[0];
if(div.currentStyle){
//IE上相容
console.log(div.currentStyle[“width”]);
}
else{
//火狐谷歌上相容
console.log(window.getComputedStyle(div,null)[“width”]);
}
複製程式碼
下面呢,我寫了一個相容性的方法,大家可以參考參考:

複製程式碼
var div=document.getElementsByTagName(“div”)[0];

    console.log(getStyle(div,"background-color"));
    function getStyle(ele,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(ele,null)[attr];
        }
        return ele.currentStyle[attr];
    }