如何將CSS樣式應用於AJAX調用後呈現的內容

我正在編寫一個應用程序，通過AJAX抓取一堆JSON數據，然後呈現由es6模板文本中的相同數據構建的視圖。非常簡單的版本來演示：如何將CSS樣式應用於AJAX調用後呈現的內容

let mountPoint = document.getElementById("mountPoint"); 
 
let view = document.createElement("section"); 
 
view.id = "view"; 
 
view.innerHTML = `<section>${returnedAjaxData}</section>`; 
 
mountPoint.innerHTML = view;

#mountPoint { 
 
    background: #000000; 
 
} 
 

 
#view { 
 
    background: #444444 
 
}

<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>My App</title> 
 
</head> 
 
<body> 
 
    <section id="mountPoint"></section> 
 
</body> 
 
</html>

，其中$ {returnedAjaxdata}是將數據從Ajax調用（這裏沒有顯示，但做工精細）

問題返回是「＃ mountPoint「有黑色背景，但」#view「沒有灰色背景。看起來CSS文件是在「#view」呈現之前運行的，因爲它在呈現前等待Ajax數據。

編輯我知道如何改變CSS在AJAX成功的特定元素。我的問題是，如何在AJAX調用返回並呈現DOM後運行整個樣式表。對於上下文 - 整個應用程序將在「#mountPoint」中，因此更新單個元素不會有太大幫助

一個可能的解決方案是在呈現「#view」之後編寫styles.min.css文件，但這似乎很難...我想知道：React和其他視圖渲染框架如何做到這一點？它們在讀取CSS文件之後呈現HTML以及對嗎？我可以學到這種模式嗎？

來源

2017-07-25 HelloWorld

的可能的複製[ jQuery：改變加載了ajax的元素上的CSS？]（https://stackoverflow.com/questions/6866043/ jquery-changing-the-css-on-an-element-loaded-with-ajax） –

我不這麼認爲。該答案引用瞭如何更改單個元素，我需要整個樣式表在AJAX調用返回並且innerHTML呈現後運行 – HelloWorld

Element#innerHTML解析字符串，並將其設置爲節點的html內容。您使用Document#createElement創建的節點不是字符串。當您嘗試使用元素＃innerHTML將其添加到mountPoint時，它將轉換爲字符串，並且該字符串沒有ID view。

您需要使用Node#appendChild或ParentNode#append（不支持MS瀏覽器）將節點追加到視圖。

另外css選擇器（例如id）區分大小寫，並且在HTML中的mountpoint和mountPoint不一樣。

let mountPoint = document.getElementById("mountPoint"); 
 
let view = document.createElement("section"); 
 
view.id = "view"; 
 
view.innerHTML = `<section>returnedAjaxData</section>`; 
 
mountPoint.appendChild(view); // append as a child of mountPoint

#mountPoint { /** renamed to mountPoint **/ 
 
    height: 40px; /** just for the example **/ 
 
    background: #000000; 
 
} 
 

 
#view { 
 
    background: #444444 
 
}

<section id="mountPoint"></section>

如果在CSS和HTML中的ID是完全一樣的元素＃innerHTML的也能發揮作用：

let mountPoint = document.getElementById("mountPoint"); 
 
mountPoint.innerHTML = '<section id="view">returnedAjaxData</section>';

#mountPoint { /** renamed to mountPoint **/ 
 
    height: 40px; /** just for the example **/ 
 
    background: #000000; 
 
} 
 

 
#view { 
 
    background: #444444 
 
}

<section id="mountPoint"></section>

來源

2017-07-25 06:24:04

Parentnode.append（）在IE，Edge或Safari中無效https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append – HelloWorld

@HelloWorld - 謝謝。更新。 –

我打算接受這個答案，因爲它適用於我的示例。它仍然不適用於我的實際應用程序，因爲我需要將HTML字符串附加到視圖節點，appendChild需要DOM節點而不是字符串 – HelloWorld

如何將CSS樣式應用於AJAX調用後呈現的內容

回答

相關問題