How to add element to existing css class [closed]


Tags: javascript,jquery,css

Problem :

How to add css element to my existing css class?

CSS:

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

Is there any way to add attribute to .usergrid?

I had try like $(.usergrid).css("display","block"); but it's not working.

Thanks.

 $(".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>



Solution :

The problem here is that you cannot add stuff to the parsed CSS. You can only add inline styles to a particular element. Say, you had a <div class="usrgrid">. The only modification you do it this: <div class="usrgrid" style="color: red">. Examples presented here using .css do exactly this.

Other options are:

  1. Add CSS code dynamically
  2. Link CSS file dynamically

Update

So, I realised now from where the problem comes. You have an element, you want to modify it somehow. For example, it was invisible and then became visible or it had the white background and then became yellow, whatever. The key point here is that you have your initial state and "modifier" for it. If you take the modifier away, you get back to where things began. From CSS point of view it means:

.my-elem {}

.my-elem--big {}

.my-elem--yellow {}

.my-elem--visible {}

Now, in your JS you only need to add a proper set of modifiers (classes) to you element.

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

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

There is a naming convention for CSS called BEM. It solved exactly this problem. In a nutshell, you split your UI into blocks, elements and modifiers.

By following this approach you separate concerns (the logic of when the element should become visible, JS, and what does it mean that it is visible, CSS) and make your code more pleasant to work with (ubiquitous structure and predictability).

I personally, always try to avoid any CSS in my JS. Even if it just display: block. Because these two are meant for different things.


    CSS Howto..

    How to vertically center inline elements in CSS

    How to call and hide lists using two buttons - using Javascript HTML CSS?

    How to confine an animated div to its parent div

    joomla, CSS - show joomla module only for smartphone screens

    How do I add a button click event to my own button in Visual Studio C#

    how to change width of without affecting width

    Can't show updated image

    how to remove the css overflow:hidden of jquery dialog

    How do I center 2 divs in HTML Bootstrap?

    How can I use d3.js filter to assign different css classes to elements?

    How this switch button work by CSS?

    CSS: How to display image icon before each h3 in CSS?

    how does responsive design work?

    How can I see “:hover” and “:active” properties of elements on a webpage? [duplicate]

    How should I approach the solution to develope a static, Responsive HTML file that seems to have functionality beyond CSS/HTML capabilities?

    How to add a css style class atribute to links generated from wp_get_archives?

    How to disable properties of external css class and use internal css class with same name but different property in html

    How to get position of div inside td

    How do I make an `hr` with repeating small images?

    simple text input box “autosuggest” script - how to overlap with css

    How to center a navigation bar with CSS or HTML?

    How to select only one child element in CSS?

    How to create DropDown MenuBar using CSS

    How to set background color in AppGyver Supersonic?

    Bootstrap custom CSS rule how to set text-decoration:none for hyperlink?

    How to add multiple css rules to minimize browser reflows?

    How to apply CSS style to a Sibling Label field of a Div?

    How to style form use css [closed]

    How to customize style of numeric “li” in css [closed]

    How can I get the seletced filename from file button?