Adding CSS Classes to HTML Elements

Question

Adding CSS Classes to HTML Elements

After struggling with a question I posted yesterday about creating a "Button That When Clicked Will Display Hidden Column in HTML Table", I decided to take a different approach. Here's what I came up with:

I developed a button that, upon clicking, will add a new class to an element
This new class will allow us to toggle the visibility of a column using the 'display' property in CSS

Here's the structure of the HTML element:

echo "<td class =\"development\" id = 'tag$i'>test1</th>";
echo "<td class =\"development\" id = 'tag$i'>test2</th>";
echo "<td class =\"development\" id = 'tag$i'>test3</th>";

The variable $i represents the row number. Picture each of these <td> elements being generated within a loop to form a column.

In terms of CSS styling:

.development{
    text-align:center;
    padding-left:10px;
    display:block;
}

.hide{
    display:none;
}

Now, this is where I could use some assistance. I'm suggesting a button that, when clicked, triggers a JavaScript function to apply the '.hide' class to the <td> tags.

<button onclick="addCss()">Click me</button>

I'm uncertain about how to write the JavaScript code and whether I need to pass any parameters such as the ids for the <td> tags.

javascript html css

Answer 1

Answer №1

document.getElementById('yourId').className += ' ClassName'

//To target elements by their class name.
 document.getElementsByClassName('yourId')

Note: the space following the first ' is crucial when appending a class name.

Why? : When you have a class named "class1" and add "class2" - It will become "class1class2"

By including the space, it will appear as "class1 class2" and be treated as two distinct classes.

<button onclick="document.getElementById('yourId').className += ' ClassName';">Click me</button>

If you wish to create a more effective solution.

<script>

function addCss(element) {   
document.getElementById(element).className += ' ClassName'; 
}

</script>

Simply invoke the function as initially done. You can even specify the class name as a parameter.

Answer 2

document.getElementById('yourId').className += ' ClassName'

//To target elements by their class name.
 document.getElementsByClassName('yourId')

Note: the space following the first ' is crucial when appending a class name.

Why? : When you have a class named "class1" and add "class2" - It will become "class1class2"

By including the space, it will appear as "class1 class2" and be treated as two distinct classes.

<button onclick="document.getElementById('yourId').className += ' ClassName';">Click me</button>

If you wish to create a more effective solution.

<script>

function addCss(element) {   
document.getElementById(element).className += ' ClassName'; 
}

</script>

Simply invoke the function as initially done. You can even specify the class name as a parameter.

Answer 3

Answer №2

When you need to replace a class, use this code:

document.getElementById("id").className = "newclass";

If you want to add a new class, you can do so with this code:

document.getElementById("id").className += " anotherclass";

function addCss(){
document.getElementById("b").className = "hide"; 
}

function newCss(){
document.getElementById("b").className = "show"; 
}

body {
  font-size: 3em;
  background: honeydew;
}

.hide {
  display: none;  
}

.show {
  display: table-cell;  
}

<table>
<tr>
<td id=a style="background:skyblue">A</td>
<td id=b style="background:yellowgreen">B</td>
<td id=c style="background:gold">C</td> 
<td id=d style="background:orangered">D</td>
</tr>
</table>

<button onclick="addCss()">hide B cell</button>
<button onclick="newCss()">show B cell</button>

Answer 4

When you need to replace a class, use this code:

document.getElementById("id").className = "newclass";

If you want to add a new class, you can do so with this code:

document.getElementById("id").className += " anotherclass";

function addCss(){
document.getElementById("b").className = "hide"; 
}

function newCss(){
document.getElementById("b").className = "show"; 
}

body {
  font-size: 3em;
  background: honeydew;
}

.hide {
  display: none;  
}

.show {
  display: table-cell;  
}

<table>
<tr>
<td id=a style="background:skyblue">A</td>
<td id=b style="background:yellowgreen">B</td>
<td id=c style="background:gold">C</td> 
<td id=d style="background:orangered">D</td>
</tr>
</table>

<button onclick="addCss()">hide B cell</button>
<button onclick="newCss()">show B cell</button>

Answer 5

Answer №3

With the power of jQuery, one can seamlessly incorporate this snippet into the addCss function:

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

Answer 6

With the power of jQuery, one can seamlessly incorporate this snippet into the addCss function:

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

Adding CSS Classes to HTML Elements

Answer №1

Answer №2

Answer №3

Similar questions

Get a collection of stock statistics and quotes using Flutter and the IEX JSON API

Optimal method for identifying all inputs resembling text

Creating a three-dimensional network visualization in three.js

Customize footer's background color based on current route in Angular

The HTML element cannot be set within page.evaluate in Node.js Puppeteer

Issue with displaying info window when clicking on marker in react-google-maps

Uploading CouchDB document attachments using an HTML form and jQuery functionality

Glitches of white light during loading screens on your Prestashop website

The orbitController in threejs is malfunctioning and failing to properly adjust the camera's LookAt

Conceal an extended menu by clicking away from the container: a guide on implementing a code snippet

Dynamic menu plugin for JQuery

Exploring Firebase database with AngularJS to iterate through an array of objects

Unique Selector Customization

Characteristics Exclusive to Inner Division

I can't figure out why I'm receiving undefined even though all the variables are populated with the necessary

Unlock the ability to retrieve the context element from a dynamically bound event within the event handler using jQuery

Change this time record into a standard date

What is the best way to update the old string values with the new string values?

Having multiple instances of jQuery running concurrently on a single webpage

Issue with applying Angular animation to child element