ベストプラクティスが指示する傾向にあるので、私はコードを分けておきたい。そのように、私はJavascriptのコードの次のような問題の行があります。JavaScriptにJavascript変数を渡す
x[i].firstChild.innerHTML = remain;
をこれは完璧に動作しますが、JavaScriptでプレゼンテーションを編集する私のルールを破ります。代わりに@remainをCSSに渡して、私が参照しているx[i]要素にクラスを追加したいと思います。クラスでは、内容は変更されますが、CSSでJS変数を参照する方法がわかりません。
JSでは、変数xを作成すると、その値をCSSでどのように参照できますか。
重要であれば（おそらくそうでなければならない）、すべての言語は異なるファイルにあります。
あなたはこのあなたが試すことができるJSを使用する場合、この
@percent: 1;
@height: `Math.round(screen.height * @{percent})`;
@width: `Math.round(screen.width * @{percent})`;
div.content {
margin: auto;
top: @height;
width: @width;
}
を試みるJSと少ないのCSSを使用する場合：あなたはjQueryのを使用するように弱々しい場合
var percent=1;
document.querySelector('div.content').style.top = Math.round(screen.height * percent)+'px';
document.querySelector('div.content').style.width = Math.round(screen.width * percent)+'px';
あなたが試すことができますこの
var percent=1;
$("div.content").css('top', Math.round(screen.height * percent)+'px');
$("div.content").width(Math.round(screen.width * percent));
非常に特定の要素内に配置する計算値として代わりに@remainを使用できます。 KnockoutJSは、HTMLとJavaScriptの間のこの接続をはるかに簡単にしますが、2つの間でかなり良い障壁を維持します。 ReactJSとJSXの採用により、JavaScriptとHTMLの間の障壁は非常に急速に解消されています。 – k2snowman69
私は物事が変わることがあると理解しますが、今のところアクセシビリティは私のプラットフォームの大きな部分です。これで、基本的なウェブデザインの練習をしている人は誰でも、私のコードをとても簡単に（特に雇用主に）従うことができます。誰かが自分のコードを読む必要がないときは、より多くのニッチな手法を採用することができます。しかし、あなたのコメントは、私の方向性について考えるときに何か考えてくれます。 –
あなたのルールは、JSからHTMLコンテンツを設定するのではなく、CSSのJS変数を参照したいと思っているような、少し恣意的なようです。 *悪い*のようなものがあれば、CSSはコンテンツのスタイルを設定するだけで、コンテンツのテキストは設定しないためです。また、HTML要素のテキストをJSから更新するのは、通常の慣行なので、問題を回避しようとしているコードについては説明しません。 （要素のテキストをCSSからどうやって設定しますか？） – nnnnnn