既存のCSSクラスに要素を追加する方法

既存のCSSクラスにCSS要素を追加するにはどうすればよいですか？既存のCSSクラスに要素を追加する方法

CSS：

.usrgrid { 
    color:blue; 
    background-color:white; 
}

が.usergridに属性を追加する方法はありますか？

私は$(.usergrid).css("display","block");のように試してみましたが、動作しません。

ありがとうございました。

$(".usergrid .k-button").css({ "display": "block" });

.usergrid .k-button{ 
 
    color:black; 
 
    background-color:white; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.bootstrap.mobile.min.css" /> 
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script> 
 

 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> 
 

 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 

 
</body> 
 
</html>

出典

2016-12-09 Austin Hoh

'$（ '。usrgrid'）のように引用符で囲んでください。css（" display "、" block "）;' – philantrovert

クラスの表示ブロックのように聞こえます。jqueryを使用しているusergrid –

jqueryライブラリを最初にインクルードしていることを確認してください。 –

PROBここでは、解析されたCSSに要素を追加できないということです。インラインスタイルは、特定の要素にのみ追加できます。いいえ、あなたは<div class="usrgrid">でした。これを行う唯一の変更は<div class="usrgrid" style="color: red">です。 .cssを使用してここに示した例は、これを正確に行います。

その他のオプションは以下のとおりです。

は、CSSコードを動的
リンクのCSSファイルを追加し、動的に

更新

だから、私はこの問題は、どこから来るのか、今実現。あなたは要素を持っています。あなたは何とかそれを修正したいのです。例えば、見えなくなり、目に見えるようになったり、背景が白くなったり、黄色になったりします。重要な点は、初期状態とそのための「修飾子」があることです。モディファイアを取り除くと、物事が始まったところに戻ります。ビューのCSSの観点から、それは意味：今すぐ

.my-elem {} 

.my-elem--big {} 

.my-elem--yellow {} 

.my-elem--visible {}

を、あなたのJSであなただけの要素に修飾（クラス）の適切なセットを追加する必要があります。

<div class="my-elem"></div> 

<div class="my-elem my-elem--visible"></div>

BEMと呼ばれるCSSの命名規則があります。それはまさにこの問題を解決しました。簡単に言えば、UIをブロック、要素、修飾子に分割します。

このアプローチに従うことで、要素が表示されるタイミングのロジック（JS、それが表示されるCSSという意味）と、コードをより快適にする（ユビキタスな構造と予測可能性）。

私は個人的に、私のJSの中には常にCSSを避けるようにしてください。たとえそれでもちょうどdisplay: block。これらの2つは異なるものを意味しているからです。

出典

2016-12-09 06:41:15

@Ouroborusの編集に感謝します！私の子供は走り回っていて、クラスを使用せずに意味するのは粗い回答 –

だけです。クラスにCSSプロパティを追加できませんか？@Ivan –

よろしいですか。クラスはCSSに由来し、DOM要素に適用されます。直感は、DOM要素を分類することです。 "緑のリンク"、 "大きなヘッダ"、またはその両方などのようなものです。したがって、（スタイリングの視点から）余分なものをDOM要素に追加する場合は、インラインCSSまたは別のクラスをクラスリスト。 –

あなたはまた、複数のCSSプロパティを設定するには、次の構文を使用することができます

$('.usergrid').css("display","block");

出典

2016-12-09 06:31:43

しかし、usrgridクラスがhtml要素のいずれでも使用されていないが、新しい属性を追加したい場合はどうすればよいですか？ –

クラスを終了する代わりにID、クラス名、または要素名を使用する必要があります –

このコードを試してみてください。

$('.usergrid').css({"display": "block", "background-color": "white"});

出典

2016-12-09 06:34:12

<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script> 
jQuery(document).ready(function(){ 
    jQuery('.usergrid').css("display","block"); 
}); 
</script>

出典

2016-12-09 06:39:33 Samyappa

既存のCSSクラスに要素を追加する方法

答えて

関連する問題