使用Javascript或jQuery將CSS添加到所有HTML元素

我想採用CSS選擇器，屬性和值，並使用jQuery或Javascript將其添加到HTML。使用Javascript或jQuery將CSS添加到所有HTML元素

我至今嘗試過是這樣的：

function toggleCSS() { 
    var preview = document.getElementById("preview"); 
    var previewChildren = document.getElementById("preview").querySelectorAll("*"); // Get all of the elements created in the preview from the users HTML input 
    var cssToAdd = document.getElementById("cssTextArea").value; // The user is going to type in regular CSS into a textarea, and here I am retrieving the value they typed in 

    $(previewChildren).each(function() { 
     $(this).css(); // Looping through each node 
    }); 
}

例輸入：（HTML）

<html> 
<head> 
    <title>Test</title> 
</head> 

<body> 

    <div> 
     Hello World! 
    </div> 

    <div id="TestDiv"> 
     This is a test! 
    </div> 
</html>

（CSS）

#TestDiv { 
    background-color: red; 
}

我被陷在添加CSS的一部分。我在變量cssToAdd中有原始輸入，但是如何翻譯該CSS以獲取選擇器並將該選擇器中的屬性添加到每個HTML元素？

來源

2016-09-30 Dom

無論你想要做什麼，都需要更詳細的解釋，因爲目前還不是很清楚。破損的代碼不能很好地替代正確的解釋 – charlietfl

對於開始'document.getElementById（「preview」）''會引發一個問題，因爲你沒有帶'ID'預覽的元素。如果你希望顯示一個例子，請確保它在工作順序或JavaScript是一個匹配的HTML。 – NewToJS

@NewToJS HTML元素「預覽」與問題無關。如果我添加了所有內容，它會混淆這個問題。 – Dom

假設在cssTextArea值合式的關於單個元件在previewChildren CSS規則集，可以只取對象，並將其傳遞給css()功能。您可能需要用引號括鍵和值：

$(this).css({ "background-color": "red", "color":"black",...})

見http://api.jquery.com/css/#css-properties

來源

2016-09-30 00:23:39 varontron

你知道一種方法，我可以把上面的CSS例子（#TestDiv）和分開來獲得選擇器（#TestDiv）和屬性，然後添加使用你的上面的線？ – Dom

你可以使用多行正則表達式：在這裏或其他地方的快速搜索可能會返回一個合適的解決方案。如果這是面向客戶的應用程序，我會推薦一個類似[CSSLint]（https://github.com/CSSLint/parser-lib） – varontron

如果用戶輸入正確和完整的CSS規則只是把它包裝都在一個<style>標籤，並追加到<head>

$('<style>').text(cssToAdd).appendTo('head');

來源

2016-09-30 00:26:55 charlietfl

Genius的庫。我會在一分鐘內感到興奮。 – Dom

你知道我怎麼能把這個應用到我的「預覽」div而不是整個內部

使用Javascript或jQuery將CSS添加到所有HTML元素

回答