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

Troubleshooting issue with file upload feature in Angular for Internet Explorer 9

The React router Link does not update the route after an if statement is executed

Tips for configuring Webstorm to automatically change double quotes to single quotes when reformatting source code

Issue with Angular modal text boxes failing to populate using ngModel

Using JavaScript to pass a newly created variable as an argument in a default

"Encountering a problem with a missing object in jQuery when referencing

Ways to shut down a pop-up

Tips for adjusting the font size of a Chip using Material-UI

Incorporate JSON when adding a new row to the database using Ruby On Rails

Parallax not functioning properly due to CSS before and after elements

Execute AJAX request for two individual buttons

Sliding carousel from right to left

Launching a React project using the terminal - my step-by-step process

Trouble displaying background image in Electron Application

applying a timeout for the .on(load) event

Performing calculations with jQuery to extract the value of a selected dropdown option and a text

Steps for transferring data between two components

Nothing is being returned when using JQuery AJAX POST

Class-driven dynamic CSS

Is the script failing to retrieve the innerHTML content?