Is it possible to dynamically apply CSS style based on the parent property of a div element using JavaScript? Here is an example:
<div clas="parent">
<div class="child">
<div class="x"></div>
</div>
</div>
I would like to toggle the CSS property for the class "x" based on the parent class's CSS property. Is there a way to achieve this?
Is JavaScript truly necessary for toggling based on a parent class? Achieving this effect using only CSS is absolutely possible.
.parent .child .x {
background-color: red; /* initial styling */
}
.parent.someClass .child .x {
background-color: yellow; /* overrides the default style with greater specificity */
}
let z = document.getElementById('child').parentNode.className;
if (z === "active") {
document.getElementById('x').style.background = '#ff0000';
}
Check out the live demo here: http://codepen.io/simsketch/pen/vgNjdp
I hope you find this information helpful!
To begin, you select an element using the querySelector method, and then you can modify its class by using the className property.
For instance, if you want to change the color to red in your scenario, you could execute:
document.querySelector('.parent .child div').className = "x"
If you wish to toggle a class, you can achieve that with the classList.toggle("x") method:
document.querySelector('.parent .child div').classList.toggle("x")`
If you are using jQuery, you can achieve this by utilizing specific selectors as shown below:
$('.x').each(function() {
if ($(this).closest($('.parent')).hasClass('makeBlue')) {
$(this).addClass('turnBlue');
}
if ($(this).closest($('.parent')).hasClass('makeRed')) {
$(this).addClass('turnRed');
}
});.x.turnBlue {
background-color: blue;
width: 250px;
height: 250px;
}
.x.turnRed {
background-color: red;
width: 250px;
height: 250px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parent makeBlue">
<div class="child">
<div class="x"></div>
</div>
</div>
<div class="parent makeRed">
<div class="child">
<div class="x"></div>
</div>
</div>Situation: In the process of upgrading an outdated PHP 4 website, I am tasked with implementing an online payment system. This will involve utilizing an external payment platform/gateway to handle transactions. After a customer has completed their order ...
Having recently delved into the world of Ajax, I've encountered some issues. Allow me to do my best in explaining the problem at hand. Currently, I'm engaged in a Laravel 8 project. In this project, users are given the choice to select an image, ...
I'm currently working with a REST API in combination with Angular. The issue I'm facing is related to post objects that include file attachments. Every time a user wants to download a file attachment, they must make a call to /get/file/{id}, but ...
So I've got a question: can you actually open a youtube video using an HTML5 video player? I'm looking for a more mobile-friendly way to watch youtube videos, and my idea was to upload a thumbnail image and then set up an onclick function to disp ...
For my ASP.NET generated hyperlink that says "select location", when the user clicks on it, they are redirected to a new page where they can choose a different location at /change-location/default.aspx. This could be any country, state, or city in the worl ...
Currently, I'm in the process of creating a unique layout component to enhance the design of my Show page. I've encountered some inconsistencies with functionality, and my solution involves utilizing the Material-UI <Grid> component. While ...
I have a simple axios code snippet: axios.get(GEO_IP) .then(res => res) .catch(err => err); In addition, I have configured some default settings for axios: axios.defaults.headers["content-type"] = "application/json"; axios.defaults.headers.common. ...
How can you implement a loading spinner following an HTTP request, or any asynchronous operation that occurs over time, using the specified logic? Wait for X seconds (100ms) and display nothing. If the data arrives within X seconds (100ms), display i ...
During my automated requests (scheduled at specific times, without user involvement), I have noticed that xmlHttpRequest includes extra http headers. In order for the server not to be able to distinguish these requests as automated (they should appear exa ...
Currently, I am constructing a DatePicker React component utilizing the Material-UI picker library and integrating Luxon as an adapter. Whenever I modify the calendar date, I receive an object containing DateTime information as shown below: This is the co ...
Whenever I try to add a new record in my Collection-Type, all the field values are successfully added to the new entry except for the value in the field with a Relation type. For instance, in my event Collection-Type, I have fields like name, performers, ...
Currently, I am utilizing Visual Studio Code for my coding tasks. I specifically do not prefer the auto insertion of semicolons after CSS properties by VS Code. However, it keeps providing me with an autocomplete option that I find undesirable. Is there a ...
Are there any algorithms available to handle incrementing numbers in duplicate filenames? For instance, let's consider a simple collection of documents stored in a file collection: [ { "_id": "612ead8668bfcc4221a788f6" ...
I'm currently working on developing a responsive navbar. Everything seems to be functioning well in larger window sizes, but when I view it on an xs screen, the first element of the navbar does not collapse properly. For reference, here are two exampl ...
<!-- Left Navbar --> <div class="container-fluid" style="margin-top: 50px"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul ng-repeat="type in types" class="nav nav-sidebar"> <li>{{ ...
I am trying to vertically align my checkboxes so that each option appears on a separate line. I searched online and found suggestions to use vertical-align: middle, but that only changes the position of the label. I want each checkbox to be displayed on it ...
I am in the process of creating a website login window with an image background, but I'm experiencing issues where the image is being cut in half and moved up. Here is the code snippet I am currently using: .loginbody { background: url(img/LoginB ...
Recently, I encountered an error message from the compiler stating: Cannot write file 'path/file.json' because it would overwrite input file. After some investigation, most of the solutions suggested using outDir to resolve this issue. Although t ...
I need help with displaying my columns in this specific layout https://i.stack.imgur.com/2hzju.jpg Code <div class="row"> <div id="id-orders-stats" class="col-md-6 col-sm-6"> </div> <div class="col-md-6 col-sm-6 stats-box"&g ...
I'm currently troubleshooting an issue with this particular code snippet: import globalComponents from './global-components'; // ... globalComponents.forEach((component) => { // eslint-disable-next-line no-underscore-da ...