I am trying to apply a filter of not(.pseudo-element) using JavaScript, but I am unsure how to add it. So far, I have been able to extract #app from the DOM with the following code:
const app = document.getElementById('app')
app.style.filter = 'brightness(0.5)'
Now my objective is to apply this brightness filter to all child elements except for one. How can I achieve this using JavaScript?
You have the choice to utilize shotgun02's solution or try something similar:
const items = [...app.querySelectorAll('*:not(.pseudo-element)')];
items.forEach((item) => {
item.style.filter = 'brightness(0.5)';
});
In this scenario, I opted for the spread syntax ([...app.querySelectorAll()]) because I find it easier to work with Objects rather than NodeLists but that is purely my personal preference.
Another approach could involve using the .classList() method :
const items = [...app.querySelectorAll('*')];
items.forEach((item) => {
if (!item.classList.contains('pseudo-element')) {
item.style.filter = 'brightness(0.5)';
}
});
Remember that if possible, it might be best to achieve the same result using CSS instead of JS.
* {
filter: brightness(0.5);
}
.pseudo-element {
filter: none;
}
To exclude elements with the class .pseudo-element, you can use the :not() selector in the following way when selecting child elements from app.
app.querySelectorAll('*:not([class="pseudo-element"])');
Alternatively, you can write it as shown below:
app.querySelectorAll('*:not(.pseudo-element)');
You can also use commas to exclude multiple classes with the :not() selector:
app.querySelectorAll('*:not(.pseudo-element,.pseudo-element-2)');
I am creating a webpage where users are required to input their postcode in order to search for factories nearby. To achieve this, I have implemented a jQuery modal dialog that prompts users to enter their postcode and click submit. Once submitted, a cook ...
I am looking to store data collected from an HTML form into a MongoDB database. Below is the code I am using: <!DOCTYPE html> <html> <head> <title>Getting Started with Node and MongoDB</title> </head> <body> ...
To manually add a row, each row is stored in the "items" array items: [ { occuGroup:'', constType:'', bfloorArea: 0, cfloorArea: 0 }, ], Below is the code I wrote to calculate the total: subTotal: function() { var ...
let result = JSON.parse(data.d); The current code doesn't seem to be working.. Here is the structure of my JSON object: [{"ItemId":1,"ItemName":"Sizzler"},{"ItemId":2,"ItemName":"Starter"},{"ItemId":3,"ItemName":"Salad"}] Any suggestions on how I ...
I have successfully modified the bootstrap navbar to toggle from right to left instead of top to bottom using the following code: For HTML- <nav class="navbar navbar-inverse" role="navigation" style="height: 55px; padding-top: 2px; background-color: # ...
When accessing the Java API at localhost://company/products/123/fetchOptions, you can expect a response similar to the following: { "Increase": true, "Decrease" : true, "Like" : true, "Dislike" : true, "Old" : false, "Others" : true } Using Angula ...
Issue with Checkbox Functionality: In a Material Dialog Component, I have implemented several Material Checkboxes to serve as column filters for a table: <h1 mat-dialog-title>Filter</h1> <div mat-dialog-content> <ng-container *ng ...
Recently, I developed a login page in HTML that prompts users for their username and password. The information is then sent to ABC.php, and upon successful authentication, they are redirected to another website. To make this work, I set up a xampp server. ...
My server handles component rendering and generates an HTML response upon request. During the rendering process, the server initiates a GraphQL call for a specific component which sometimes results in a 403 error. Here is the code snippet: const client = ...
I am encountering an issue where my JSON file gets cleared if I restart the page quickly after using the fs module to read/write it. The JSON data is read at the beginning of the page like this: let preferencesJSON; try { preferencesJSON = fs.readFile ...
I've been working on image editing and encountered a bit of trouble with aspect ratios. <img src="big_image.jpg" width="900" height="600" alt="" /> As you can see, the height and width are already specifi ...
I've been diving into learning Thee.js, and while it's fairly straightforward, I've hit a roadblock with getting shadows to work. Despite setting castShadows, recieveShadows, and shadowMapEnabled to true in the appropriate places, shadows ar ...
My code for uploading files is as follows: var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress, false); xhr.open("POST", requestUrl, true); xhr.send(f); I want to draw your attention to the fact that I have attached a l ...
Why does the ng-style condition not work with min=0 if the saved value of ng-model="detail.Amount" is negative? <input type="number" min="0" oninput="validity.valid||(value='');" class="form-control" title="Amount" ng-model="detail.Amount" ng ...
Could someone provide an example of how "em is relative to the font size and % is relative to the parent element" works? What exactly do "relative to the font size" and "relative to the parent element" mean? ...
I have the following code snippet as a reference and I'm attempting to retrieve a list of dates from 30 days before. What do I need to change? Date.prototype.addDays = function(days) { var newDate = new Date(this.valueOf()) newDate.s ...
Need help running asynchronous functions in .exports, getting promises, and using the results in subsequent async functions. Despite using awaits, the second function seems to execute before the first one. sales.js = const sqlite3 = require('sqlite ...
Within my SharePoint environment, there exists a website where users can load a single list item based on their selection using JavaScript and CSOM. This particular list item contains approximately 60 properties defined in its list definition. Users have ...
Feeling stuck and seeking guidance. After following tutorials, I was able to develop a basic user registration/login app in nodejs/express with the addition of a socket.io chat feature. Upon user login, they are directed to the real-time chat page where i ...
I've recently started using WebDataRocks and I'm having trouble getting the height to fill the window. Despite what the documentation says (), which states, "The height of the pivot table in pixels or percent (500 by default)". The code snippet ...