Modify the CSS class by adding attributes dynamically instead of directly to the element

Question

Modify the CSS class by adding attributes dynamically instead of directly to the element

I encountered a situation where I needed to apply a css property to a class rather than an element.

For example:

    $('.class_with_css').css({display:'none'});

This code would add the style "display:none" to all elements with the class "class_with_css". However, I wanted to apply the "class_with_css" class to a new element after this and keep the added style. Is there a way to achieve this without calling the above function again?

For instance:

Initial setup with two elements

    <div id=1 class="abc" ></div>
    <div id=2 class="abc" ></div>

Run the code

    $('.abc').css({display:'none'});

The elements become:

    <div id=1 class="abc" style="display: none;"  ></div>
    <div id=2 class="abc" style="display: none;" ></div>

Add the "abc" class to a new element like this

    <div id=3 class="abc" ></div>

Is there a way to make the "abc" class hold the style instead of individual elements so that even the element in step 4 also has display:none?

javascript html jquery css css-selectors

Answer 1

Answer №1

Unfortunately, there is no direct way to achieve your desired result. Typically, this is done by already having a CSS class with the desired changes and properties, then applying that class instead of individual CSS properties.

For example, you would have:

.hide {
    display: none;
}

and then add the class to elements like so:

$('.abc').addClass('hide');

UPDATE
Alternatively, if you absolutely need to dynamically add a CSS class, you can refer to the solution provided here.

Answer 2

Unfortunately, there is no direct way to achieve your desired result. Typically, this is done by already having a CSS class with the desired changes and properties, then applying that class instead of individual CSS properties.

For example, you would have:

.hide {
    display: none;
}

and then add the class to elements like so:

$('.abc').addClass('hide');

UPDATE
Alternatively, if you absolutely need to dynamically add a CSS class, you can refer to the solution provided here.

Answer 3

Answer №2

You have the ability to inject style into your header.

HOWEVER, KEEP IN MIND that once you do so, you will need to use display: block; to display it. Otherwise, by default, the style will be set to display: none; until you refresh the page.

The Inject() function injects style into your header.

The Add() function adds the "abc" class to other div elements.

The Showme() function sets "display: block" for elements with the ".abc" class.

The Hideme() function sets "display: none" for elements with the ".abc" class.

function Inject(){
  $('head').append('<style type="text/css">.abc {display: none;}</style>');
}
function Add() {
  $("#w").addClass("abc");
  $("#z").addClass("abc");
}
function Showme() {
 $(".abc").css("display","block");
}
function Hideme() {
 $(".abc").css("display","none");
}

button {
border: 0;
padding: 1% 3%;
background-color: lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="x" class="abc">x</div>
<div id="y" class="abc">y</div>
<div id="w">w</div>
<div id="z">z</div>
<p>First Click below and see how w and z are not hiding</p>
<button onclick="Inject()">Click to inject style to head</button>
<p>Second click below and add "abc" class to w and z.</p>
<button onclick="Add()">Click to add abc to w and z</button>
<p>Then click below to add style="display:block;"</p>
<button onclick="Showme()">Click to show anything with class "abc"</button>
<p>Then click below to add style="display:none;"</p>
<button onclick="Hideme()">Click to hide anything with class "abc"</button>

Answer 4

You have the ability to inject style into your header.

HOWEVER, KEEP IN MIND that once you do so, you will need to use display: block; to display it. Otherwise, by default, the style will be set to display: none; until you refresh the page.

The Inject() function injects style into your header.

The Add() function adds the "abc" class to other div elements.

The Showme() function sets "display: block" for elements with the ".abc" class.

The Hideme() function sets "display: none" for elements with the ".abc" class.

function Inject(){
  $('head').append('<style type="text/css">.abc {display: none;}</style>');
}
function Add() {
  $("#w").addClass("abc");
  $("#z").addClass("abc");
}
function Showme() {
 $(".abc").css("display","block");
}
function Hideme() {
 $(".abc").css("display","none");
}

button {
border: 0;
padding: 1% 3%;
background-color: lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="x" class="abc">x</div>
<div id="y" class="abc">y</div>
<div id="w">w</div>
<div id="z">z</div>
<p>First Click below and see how w and z are not hiding</p>
<button onclick="Inject()">Click to inject style to head</button>
<p>Second click below and add "abc" class to w and z.</p>
<button onclick="Add()">Click to add abc to w and z</button>
<p>Then click below to add style="display:block;"</p>
<button onclick="Showme()">Click to show anything with class "abc"</button>
<p>Then click below to add style="display:none;"</p>
<button onclick="Hideme()">Click to hide anything with class "abc"</button>

Modify the CSS class by adding attributes dynamically instead of directly to the element

Answer №1

Answer №2

Similar questions

Storage in Ionic and variable management

The jQuery toggle function is malfunctioning when applied to the rows of a table

Sharing specific information with a particular component instance in React using .map

Having trouble retrieving directive parameters in Vue.js?

javascript with python

Learn how to keep sessionStorage state synchronized across ReactJS components

Incorporating a JavaScript advertisement zone within a PHP function

Anonymous self-executing functions with parameters from an external scope

moving the array generated on the HTML page to a different page

Tips for including a variable in formData and the steps for implementing it in an ajax procedure

What could be the reason for the CORS failure when making requests from an HTTPS domain to an HTTP localhost

Instructions for user to upload and play an MP4 file on their PC

`sendNodejs header not being transmitted during connection``

Output Scalable Vector Graphics (SVG) content on a webpage

Error encountered during Jest snapshot testing: Attempting to destructure a non-iterable object which is invalid

How to leverage async/await within loops in Node.js for optimized performance and efficiency

"The file upload function is populating the req.body object, but not the req.file

Develop a list of findings from the search

Will Node applications be affected as newer versions of their dependencies are released, causing them to stop functioning properly?

Attempting to download an image through an axios fetch call