Javascript-getElementById儘管元素存在於頁面

返回null我寫了一些函數來顯示和隱藏頁面上的各種div，通過使用setAttribute應用稱爲「隱藏」和「可見」的樣式類。此功能旨在一次隱藏多個div。在數組中列出了要給予「隱藏」類的每個div的ID。Javascript-getElementById儘管元素存在於頁面

每個div可能有多個類，所以當div被賦予「隱藏」類時，除了被替換的「可見」類外，其他類必須保留。

function hideSections() { 
    // Initialise array with div IDs 
    var divs = new Array("tab-1", "tab-2", "tab-3", "tab-4", "tab-5"); 

    // Loop through divs in array 
    for (var count = 0; count < divs.length; count++) { 

    // Get existing classes 
    var div = document.getElementById(divs[count]); 
    var divClass = div.getAttribute("class"); 

    // Remove "visible" class if it exists 
    divClass = divClass.replace("visible", ""); 

    // Append "hidden" class 
    div.setAttribute("class", divClass + " hidden"); 
    } 
}

由於某種原因，此功能不起作用，但它肯定被調用。

如果放置在循環[[var divClass = div.getAttribute（「class」）;]]之前，則會出現放置在循環內的alert（）。放在這條線後面，它不會，所以我猜這條線是問題所在。

所有的div都有一個指定的類屬性。

來源

2011-09-02 spartanmouse

嘗試了這一點（http://jquery.com/）有什麼理由不你使用jQuery？ –

@Simon我開始嘗試使用jQuery UI，但標籤功能被添加到一個頁面，需要和舊版本的jquery的fancyboxes工作和jQuery UI標籤不能正確顯示與該網站的現有樣式。 – spartanmouse

如果'getElementById（）'沒有找到元素，它將返回null，這會導致下一行中斷。把'alert（div）;'和'alert（div.id）'放在你確定爲問題行的那一行之前，這樣你就可以確認你正在找到這個元素。在jQuery上：即使是舊版本也能夠做到這種簡單的選擇元素並改變他們的類。 – nnnnnn

我的猜測是你有沒有類屬性的元素，所以divClass爲空 - 導致行divClass = divClass.replace("visible", "");錯誤。（不能調用方法關閉一個空值）

嘗試檢查屬性：

// Initialise array with div IDs 
    var divs = new Array("tab-1", "tab-2", "tab-3", "tab-4", "tab-5"); 

    // Loop through divs in array 
    for (var count = 0; count < divs.length; count++) { 

    // Get existing classes 
    var div = document.getElementById(divs[count]); 
    var divClass = ''; 
    if(divClass = div.getAttribute("class")) { 
     // Remove "visible" class if it exists 
     divClass = divClass.replace("visible", ""); 
    } 

    // Append "hidden" class 
    div.setAttribute("class", divClass + " hidden"); 
    }

...或者你可以檢查出the JSFiddle demo I created。

來源

2011-09-02 00:33:54

感謝您的建議，但所有div都具有指定的類屬性，如原始問題中所述。 – spartanmouse

你需要的是實用功能來添加和刪除類。下面是一些我使用：

var trim = function(s) { 
    return s.replace(/(^\s+)|(\s+$)/g,'').replace(/\s+/g,' '); 
} 

var hasClassName = function(el, cName) { 
    if (typeof el == 'string') el = document.getElementById(el); 

    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)'); 
    return el && re.test(el.className); 
} 

var addClassName = function(el, cName) { 

    if (typeof el == 'string') el = document.getElementById(el); 

    if (!hasClassName(el, cName)) { 
     el.className = trim(el.className + ' ' + cName); 
    } 
} 

var removeClassName = function(el, cName) { 

    if (typeof el == 'string') el = document.getElementById(el); 

    if (hasClassName(el, cName)) { 
     var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)','g'); 
     el.className = trim(el.className.replace(re, '')); 
    } 
}

現在你可以這樣做：

addClass(elementOrId, 'classValue');

裹在「命名空間」或任何訴訟。

來源

2011-09-02 02:46:34 RobG

嘗試這樣：

function hideSections() { 
    // Initialise array with div IDs 
    var divs = ["tab-1", "tab-2", "tab-3", "tab-4", "tab-5"]; 

    // Loop through divs in array 
    for (var count = 0; count < divs.length; count++) { 

     // Get existing classes 
     var div = document.getElementById(divs[count]); 
     var divClass = div.getAttribute("class"); 

     // Remove "visible" class if it exists 
     var regex = new RegExp('(?:^|\\s+)' + 'visible' + '(?=\\s|$)', 'i'); 
     if (regex.test(divClass)) { 
      divClass = divClass.replace(regex, '').replace(/^\s+/, ''); 

      // Append "hidden" class 
      if (divClass) 
       div.setAttribute('class', divClass + ' hidden'); 
      else 
       div.setAttribute('class', 'hidden'); 
     } 

    } 
}

您也可以從jsfiddle

來源

2011-09-02 21:03:17 atma

Javascript-getElementById儘管元素存在於頁面

回答

相關問題