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>In my table, there are various trs and tds with different element names. I need to determine if there is text in a specific field. If there is text, I want to disable or hide the entire tr to prevent user interaction. Unfortunately, I am unable to provide ...
I am attempting to add a close icon to a bootstrap 3 input field, positioned on the top right of the input. Here is what I have tried so far: https://jsfiddle.net/8konLjur/ However, there are two issues with this approach: The placement of the × ...
While working on my React app, I encountered an issue when trying to extract the first 5 characters from a string using slice. The error message displayed was: TypeError: Cannot read property 'slice' of undefined I am utilizing a functional compo ...
I have set up a table using CGridView, which includes input text fields for user input. The problem I'm facing is that I can retrieve the text from table cells without input fields, but not from those containing input fields. PHP: <?php $this-> ...
After removing data from MongoDB, how can I redirect to the same view (handlebar)? I tried using res.render, but it shows that the website cannot be reached. Thank you for your assistance. Controller Logic var express = require('express'); va ...
I am looking to switch the css styling of a website using Python and Selenium. My initial step was to retrieve the current CSS value. Now, I aim to alter this css value. The Python code output is as follows: 0px 0px 0px 270px How can I change it from 0 ...
Currently, my Wordpress site is using the Tesseract theme which can be found at (http:// instantiwebs . com) I am interested in removing the left/right margins on all elements, similar to what has been done on this website: . Interestingly enough, they al ...
I have implemented a brief script on my signup page to define the function checkUser(user) at line 6. In the code section at the end of the HTML for the sign up form, I included an inline script onBlur='checkUser(this) within the <input> named ...
Hey there, I am currently in the process of developing a custom WordPress theme and working on creating a mobile navigation system. Although I have managed to come up with a solution that I am quite pleased with after multiple attempts, I have encountered ...
I am having trouble with the $(element).scroll(function(){}); function. When I put it into a js file, it does not work properly, but when I enter it directly into the console (just the scroll func), it works fine. My goal is to implement scrolling paginat ...
Looking for a solution to modify this function: getX: function ($scope) { $http.get('/api/X/GetSelect') .success(function (data) { ... ... }) .error(function (data) { ...
My Vue.js form includes two BootstrapVue datepickers for holiday management. Users can define the start date and end date of their holiday, with the condition that the end date must be equal to or greater than the start date. Here is my current implementat ...
I'm encountering an issue where the props from getServerSideProps are showing as undefined when I attempt to pass them into a React component. Even though my code seems correct and everything works fine on the backend, I can't seem to determine ...
Recently completed the Next13 + MDX Tutorial, however, I am still unclear on how to dynamically load my mdx files. My mdx files are not hosted on a remote server, so I do not require next-mdx-remote. Nonetheless, I am in need of a method to load different ...
I'm currently developing an HTML5 video player that also has a fallback to flash. One of the challenges I am facing is that the video content is being provided by various third-party sources. It seems that some of these third parties serve videos bas ...
What is the name of this tab menu that includes options for next and previous buttons? Additionally, is there a material-ui component available for it? ...
I am working on a select dropdown and want to add a search box to easily filter through the available options. I know this can be done using the chosen library, but I prefer to implement it using plain JavaScript or jQuery. Does anyone have suggestions on ...
Update: JSFiddle: https://jsfiddle.net/Qanary/915fg6ka/ I am currently working on implementing the `curveText` function (found at the bottom of this post). It was functioning properly with `fabric.js 1.2.0`, but after updating to `fabric.js 1.7.9`, I not ...
I recently came across a code snippet that effectively resolved my re-rendering issue in Next JS when switching pages. However, I am now faced with the challenge of sending props to the children component. In my layout.js file, I have managed to send props ...
After experimenting with JavaScript, I've managed to create a visually appealing sine wave animation but it's causing performance issues due to the high number of vectors being generated. My current setup involves utilizing the p5js library. Bel ...