使用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元素

回答