嘗試使用Javascript動態更改CSS失敗。爲什麼？

我用一個生成JSON響應的基於PHP的服務器端程序製作了一個簡單的公告板系統。嘗試使用Javascript動態更改CSS失敗。爲什麼？

對於客戶端，我選擇使用jQuery動態生成所有HTML代碼。

<body> 
<ol class="list" id="viewList"></ol> 

$(document).ready(function() { 
    $.getJSON("list.php", function (json) { 
    var nPosts = json.length; 
    for (i = 0; i < nPosts; i++) { 
     $('<ol/>', { 
      class: "viewPost", 
      id: "post" + i 
     }).appendTo("#viewList"); 
     $('<li/>', { 
      class: "viewAuthor", 
      id: "author" + i, 
      text: json[i].authorName 
     }).appendTo("#post" + i); 
     $('<li/>', { 
      class: "viewEmail", 
      id: "email" + i, 
      text: json[i].authorEmail 
     }).appendTo("#post" + i); 
    } 
    }); 
    //Problem HERE:  
    var post0 = document.getElementById("post0"); 
    post0['style']['border-top-width'] = '0px'; 
});

我在做什麼在這裏，抹去虛線，只爲第一列表項目（LI）。

試過jQuery的方式（$（「＃post0」）...）和Javascript的方式（上面）但都沒有生效。

.list { 
    border-style: solid; border-width: 1px; 
    width: auto; 
    padding: 0px; 
} 
.viewPost { 
    border-style: none; 
    border-top-style: dashed; border-top-width: 1px; 
    padding: 0px; 
}

來源

2013-11-22 Jeffrey Goines

請發佈jsFiddle。 – screenmutt

當通過JavaScript/AJAX生成大量HTML的時候，使用像knockout.js這樣的庫可以更輕鬆地進行數據綁定/模板化。 –

我只是好奇爲什麼$（'post0'）。css（...）沒有生效... –

在內存中創建集合，只是檢查，如果該指數爲0，並在循環中添加相應的樣式，並在構建完成後追加所有內容：

$(document).ready(function() { 
    $.getJSON("list.php", function (json) { 
     var elems = $([]); 

     $.each(json, function (index, value) { // assuming it's an array 
      var ol = $('<ol />', { 
       'class' : 'viewPost', 
       id  : 'post' + index 
      }), 
      li1 = $('<li />', { 
       'class' : 'viewAuthor', 
       id  : 'author' + index, 
       text : value.authorName 
      }), 
      li2 = $('<li />', { 
       'class' : 'viewEmail', 
       id  : 'email' + index, 
       text : value.authorEmail 
      }); 

      if (index === 0) ol.css('border-top-width', '0px'); 

      elems = elems.add(ol.append(li1, li2)) 
     }); 

     elems.appendTo('#viewList'); 
    }); 
});

來源

2013-11-22 13:56:22 adeneo

這是現在唯一的答案，但我無法弄清楚爲什麼。 –

我只是那麼好？ – adeneo

問題是，當文檔被加載時，這些元素沒有生成，所以jquery沒有任何記錄，這些元素存在。

因此，要解決這個問題，你必須使用jQuery的委託方法像

$(document).on('click',"class_or_id_which_is_created_runtime", function(e){ 
    //your code here 
    });

，或者你可以在創建這些元素的時間

$('<ol/>', { 
     class: "viewPost", 
     id: "post" + i onClick=blah(); 
    }).appendTo("#viewList");

來源

2013-11-22 13:46:04

請勾選答案，如果它幫助你解決你的問題;） –

奇怪的是typeof document.getElementById（「post0」）==「undefined」返回false。如果該元素沒有生成，那麼這個類型的值將是不確定的，不是嗎？ –

我認爲它會返回false，因爲考慮JAVA作爲不存在的對象的情況下，我們嘗試操作一些函數調用它拋出空指針異常同樣如何做不存在的元素的typof .. –

反而增加做的javascript函數這樣（用JavaScript），你可能想看看CSS僞類:first-child：

ol li { 
/*CSS properties for all elements here*/ 
} 

ol li:first-child { 
/* Specific CSS properties for the first element here */ 
}

注：又見:last-child和nth-child()這可能是對你有用注2：請注意這僅僅是從IE9支持...

來源

2013-11-22 13:47:39

看起來非常有成效。但是如果我有兩個不同的列表，我希望他們有兩種不同的樣式？那是因爲我使用id來命名每個元素。我想如果我正確地命名它們，我可以稍後訪問它們，就像我寫過「post0」一樣。如果我改變李的風格，那麼它將在這兩個列表上生效，對吧？ –

嘗試使用Javascript動態更改CSS失敗。爲什麼？

回答

相關問題