Adding elements to an existing CSS class can be accomplished by using the class attribute

Question

Adding elements to an existing CSS class can be accomplished by using the class attribute

Can I modify my existing CSS class by adding new elements?

CSS:

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

Is there a way to add attributes to the .usergrid class?

I attempted using

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

but it didn't work.

Thank you.

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

javascript jquery css

Answer 1

Answer №1

The issue at hand is that modifying parsed CSS directly is not possible. You can only add inline styles to a specific element. For example, if you have a <div class="usrgrid">, the only way to modify it is like this:

<div class="usrgrid" style="color: red">

. The examples mentioned in this post using .css function follow this concept.

Other alternatives include:

Dynamically adding CSS code
Loading CSS file dynamically

Additional Information

I now understand where the problem arises from. When you have an element and wish to make modifications to it. For instance, changing its visibility or background color. The crucial aspect here is having your initial state and a "modifier" for it. Removing the modifier will revert back to the original state. From a CSS standpoint, this translates to:

.my-elem {}

.my-elem--big {}

.my-elem--yellow {}

.my-elem--visible {}

In your JS, all you need to do is add the appropriate set of modifiers (classes) to your element.

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

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

There exists a naming convention in CSS known as BEM, which effectively addresses this issue. Simply put, it divides your UI into blocks, elements, and modifiers.

Following this methodology helps in separating concerns (logic of when an element should be visible handled by JS, and what it means for it to be visible managed by CSS) making your code more organized and predictable.

Personally, I always steer clear of mixing CSS with JS. Even for something as simple as display: block. These two aspects serve different purposes and should remain separate.

Answer 2

The issue at hand is that modifying parsed CSS directly is not possible. You can only add inline styles to a specific element. For example, if you have a <div class="usrgrid">, the only way to modify it is like this:

<div class="usrgrid" style="color: red">

. The examples mentioned in this post using .css function follow this concept.

Other alternatives include:

Dynamically adding CSS code
Loading CSS file dynamically

Additional Information

I now understand where the problem arises from. When you have an element and wish to make modifications to it. For instance, changing its visibility or background color. The crucial aspect here is having your initial state and a "modifier" for it. Removing the modifier will revert back to the original state. From a CSS standpoint, this translates to:

.my-elem {}

.my-elem--big {}

.my-elem--yellow {}

.my-elem--visible {}

In your JS, all you need to do is add the appropriate set of modifiers (classes) to your element.

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

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

There exists a naming convention in CSS known as BEM, which effectively addresses this issue. Simply put, it divides your UI into blocks, elements, and modifiers.

Following this methodology helps in separating concerns (logic of when an element should be visible handled by JS, and what it means for it to be visible managed by CSS) making your code more organized and predictable.

Personally, I always steer clear of mixing CSS with JS. Even for something as simple as display: block. These two aspects serve different purposes and should remain separate.

Answer 3

Answer №2

Give this snippet a try

  $('.usergrid').show();

Answer 4

Give this snippet a try

  $('.usergrid').show();

Answer 5

Answer №3

To apply various CSS properties at once, you can utilize the syntax shown below:

$('.profile-grid').css({"display": "flex", "background-color": "#f9f9f9"});

Answer 6

To apply various CSS properties at once, you can utilize the syntax shown below:

$('.profile-grid').css({"display": "flex", "background-color": "#f9f9f9"});

Answer 7

Answer №4

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

Answer 8

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

Adding elements to an existing CSS class can be accomplished by using the class attribute

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Rendering an Angular page with data using Node.js

Unable to locate a React component module that has been published

Modifying Props in Reactjs: Ways to update data passed from parent component to child component

There seems to be an error with the return from the `mapDispatchToProps` function in `

"JIRA post functionality not functioning correctly on Internet Explorer and Firefox due to jQuery compatibility

A small space underneath the <a> element nested within a <li> tag within a navigation bar

I am looking to record the exact date and time when employees clock in and out, and store this information in a MySQL

Sinon.js: How to create a mock for an object initialized with the new keyword

Having trouble populating the dropdown menu with data retrieved from the database

arrange a div inside another div

The alignment of content in the <a> tag is not centered within a <ul> list item (horizontal menu)

What is the process for transitioning from Ajax to Fetch API in JavaScript?

Attempting to utilize a custom element, the message "You attempted to use polymer without loading it first" confirms that it has indeed been imported

Codeigniter code to retrieve dynamic data in a select box

Tips for transferring PHP data to a JavaScript script within WordPress by making use of AJAX

Tips for ensuring only digits can be entered in a textbox on Firefox

Using Javascript to update text within HTML elements without affecting the structure for upcoming event listeners

What is the best way to showcase additional fields from a custom post type along with the featured thumbnail feature?

Tips for effectively utilizing tabs to showcase information for a particular user rather than solely the initial one

Error: Query has already been processed: Updating Todo with ID "612df063a8f"