JavascriptまたはjQueryを使用してすべてのHTML要素にCSSを追加してください。

CSSセレクタとプロパティと値をjQueryまたはJavascriptを使用してHTMLに追加したいと思います。私がこれまで試してみました何JavascriptまたはjQueryを使用してすべてのHTML要素にCSSを追加してください。

はこれです：

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に生の入力がありますが、セレクタを取得してセレクタ内のプロパティを各HTML要素に追加するには、そのCSSをどのように変換できますか？

出典

2016-09-30 Dom

あなたがしようとしていることは、現在はそれほど明確ではないので、もっと詳細な説明が必要です。壊れたコードは、適切な説明の良い代替物ではありません。 – charlietfl

'document.getElementById（" preview "）は、プレビューのIDを持つ要素がないので、問題を引き起こします。あなたが例を表示したい場合は、それを動作順に確認するか、javascriptがhtmlと一致するようにしてください。 – NewToJS

@NewToJS HTML要素の「プレビュー」は問題とは関係ありません。もし私がすべてを加えたら、それは問題を混乱させるだろう。 – Dom

cssTextAreaの値が、previewChildrenの1つの要素に関連する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のようなライブラリをお勧めします。私は興奮して1分後に戻ってきます。 – Dom

これは内部全体の代わりに私の "プレビュー" divにどのように適用できるか分かりますか

JavascriptまたはjQueryを使用してすべてのHTML要素にCSSを追加してください。

答えて