javascript - 要素のスタイルを設定するために、JavaScriptでオブジェクトへの定期的なアクセスを記述するための省略形を提供するにはどうすればよいですか？

Question

要素を1行でスタイル設定するJavaScriptを作成するにはどうすればよいですか？例えば、

document.getElementById('add_new').style.top=-15;
document.getElementById('add_new').style.position='absolute';

javascript自体を使用して要素のスタイルを設定するために配列または単一行にすることは可能ですか？

オブジェクトへの定期的なアクセスを書き込むための省略形を提供するにはどうすればよいですか？

score 4 · Accepted Answer

お勧めしませんが、「1」行で取得するには、次のようにすることができます。

with( document.getElementById('add_new').style ) { top=-15; position='absolute'; }

または別の方法:

element.style.cssText="background: black ; color: blue ; border: 1px solid green"

score 3 · Accepted Answer

バニラ JavaScript ではこれを行うことはできません。

jQuery を使用している場合は、オブジェクトを使用できます。

$('#add_new').css({top: '-15px', position: 'absolute'});

score 1 · Accepted Answer

ネイティブ js にはこのようなものはありませんが、jQuery を使用している場合は、次のコードを使用できます

$('add_new').css({backgroundColor: '#ffe', borderLeft: '5px solid #ccc'})

score 0 · Accepted Answer

これは最も簡単な方法です：

Javascript

document.getElementById("add_new").classList.add('addstyle');

CSS

<style>
.addstyle
{
    top: -15;
    position: absolute;
}
</style>

または、JQuery を次のように使用します。

$('.add_new').css({top: '-15px', position: 'absolute'});

score 0 · Accepted Answer

jquery を使用する意思がある場合は使用できますが、それは完全に質問の範囲内ではありません。また、「jQuery」の方法で表記する必要があります。参照用のリンクを次に示します。

次のようになります。

$("#add_new").css({
    "top": "-15px",
    "position": "absolute"
});

繰り返しますが、あなたの質問が示すように、これは純粋な JavaScript ではありません。機能させるには、追加のライブラリが必要です。

5 に答える 5