web-dev-qa-db-ja.com

jQueryを使って要素に `style = display：" block "`を追加するにはどうすればいいですか？

JQueryの要素にstyle=display:"block"を追加する方法

javascriptjqueryhtmlcss
184
Someone
$("#YourElementID").css("display","block");

編集：またはdave thiebenが以下の彼のコメントで指摘しているように、これも実行できます。

$("#YourElementID").css({ display: "block" });
312
Colin Brock

Displayプロパティを設定する目的によっては、見てみるとよいでしょう。

$("#yourElementID").show()

そして

$("#yourElementID").hide()
30
Design by Adrian

優先順位に基づいて下に書いたこの作業を行うための複数の機能があります。

一致した要素のセットに対して1つ以上のCSSプロパティを設定します。

$("div").css("display", "block")

// Or add multiple CSS properties
$("div").css({
  display: "block",
  color: "red",
  ...
})


一致した要素を表示します。大体は で、.css("display", "block") を呼び出すのと同じです。

代わりに.show()を使って要素を表示することができます

$("div").show()


一致した要素のセットに1つ以上の属性を設定します。

ターゲット要素にstyle属性がない場合は、このメソッドを使用して要素にインラインスタイルを追加できます。

$("div").attr("style", "display:block")

// Or add multiple CSS properties
$("div").attr("style", "display:block; color:red")


  • JavaScript

JQueryを使用したくない場合は、純粋なjavascriptを使用して、特定のCSSプロパティを要素に追加できます。

var div = document.querySelector("div");
// One property
div.style.display = "block";
// Multiple properties
div.style.cssText = "display:block; color:red"; 
// Multiple properties
div.setAttribute("style", "display:block; color:red");
15
Mohammad

あなたが倍数を追加する必要があるなら、あなたはこのようにそれをすることができます：

$('#element').css({
    'margin-left': '5px',
    'margin-bottom': '-4px',
    //... and so on
});

グッドプラクティスとして、大部分のスタイルにダッシュがあるので、ダッシュを使用できるようにプロパティ名を引用符で囲むこともします。それが 'display'の場合、引用符はオプションですが、ダッシュがある場合は引用符なしでは機能しません。とにかく、それを簡単にするために：常にそれらを引用符で囲みます。

10
CodingYoshi