Ways to verify if the CSS background-color is set to white?

I am looking for a solution:

$('*').click(function() {
        if($(this).css("background-color") == "#ffffff") {
           $(this).css("background-color") == "#000000"
        }
    });​​​​

that will execute on click of a specific class.

Answer №1

Even if the information is accurate (which it isn't), it would still be unreliable and unlikely to be effective. This is due to the fact that there are multiple ways to represent the color white:

  • white
  • #ffffff along with all 64 different case variations
  • #fff along with all 8 different case variations
  • rgb(255,255,255) and an infinite number of combinations with arbitrary whitespace between values
  • rgba(255,255,255,1) and an infinite number of combinations with arbitrary whitespace between values

You can verify this by following these steps:

if( $(this).css("background-color").match(/^(?:white|#fff(?:fff)?|rgba?\(\s*255\s*,\s*255\s*,\s*255\s*(?:,\s*1\s*)?\))$/i))
    this.style.backgroundColor = "#000";

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to align elements in relation to a central div container?

Is there a way to align two buttons in the center on the same line, and then position a selector to the right of those centered buttons? How can I achieve this arrangement? Essentially, how do you position an element in relation to a centered div? UPDATE: ...

Incorporate an image into a hyperlink using CSS

I am trying to enhance my URLs by adding the same image to each of them. The code I have currently is as follows: a.linkArrow { background: transparent url('../images/abc.png') no-repeat center right; padding-right: 60px; } Here is an ...

Using 'if' conditions in Reactjs: A step-by-step guide

Working with Reactjs in the nextjs framework, I have received user data that includes the "category name (cat_name)" selected by the user. Now, I need to display that category in a dropdown menu. How can I achieve this? The current code snippet showcases ...

Mongoose - facing issues with $and operator, looking for a way to locate an array containing both items

I'm currently developing a chat-based application that involves private messaging between individuals. Essentially, a Chat model in my application consists of the following schema: let schema = new Schema({ members: [{ type: ObjectId, ref: models.u ...

Sometimes the data-autoplay feature does not function properly in jQueryfullPage.js

I am in the process of developing an HTML page using jQueryfullPage.js. Within this page, I have incorporated 17 videos across 17 different sections. These videos are presented as YouTube iframes with a data-autoplay attribute. Overall, everything is fun ...

When I click, I expect to retrieve the tr element, but instead, I am receiving the td element

When I have a table and click on a tr element, the function returns a td element instead. Can someone explain why this is happening? let func = function () { $("tr").on("click", (event) => { event.preventDefault(); event.stopPropaga ...

Creating dynamic and asynchronous JSON structures with JavaScript

Struggling with async JavaScript here. I've got a function called within a jQuery AJAX function, and it looks like there are more async method calls in that function. Currently stuck in this situation. Here's the code snippet triggered by the jQ ...

Is there a method to adjust the styling of my <header> once the page hits a specific #anchor point?

Seeking some assistance with a website design challenge I am facing. I am currently working on a one-page portfolio site with four #anchor points that serve as "pages". Each div has a height of 100% to fill the entire browser height. The header, which co ...

Position fixed iframe neglects right and bottom positioning

Here is the code snippet I am working with: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head></head> <body> <iframe src="htt ...

How can cookies be managed with JavaScript, Express.js, or Node.js?

Could anyone advise on the optimal approach for managing cookies - through Express.js, Node.js, or client-side JavaScript/jQuery? I'm feeling a bit uncertain about security implications. Your assistance and insights are greatly appreciated. ...

A guide on achieving server-side rendering in React despite facing various conflicts with React Router versions

I encountered an error while trying to implement server-side rendering with React and react-router-dom. The error message You should not use Switch outside a Router has me puzzled. I suspect it might be due to a version conflict, but I'm searching for ...

Execute a jQuery function upon the selection of a browser's auto-suggested option

After entering an email address into the input field, my code will change the border color to green if it is a valid email and red if it is invalid. html: <input class="ui_input2 no_space" id="input_email" type="email" name="email" style="height:25px ...

Having trouble with the chaining of AJAX calls using Promises?

I am currently attempting to send a POST request (technically a DELETE) to a php page called delete_post.ajax.php. This request takes data from my AJAX call and utilizes it to delete an item from the database. After deletion, I want my AJAX to then send a ...

Transferring PHP data to JQuery through HTML elements

When adding a new comment to the list using PHP variables containing HTML code, the method of choice is typically through JQuery. The question arises - what is the most effective way to achieve this? Would one generally opt for an ajax call? Here's t ...

Positioning Google Chart in HTML

I'm attempting to arrange three distinct Google pie charts in a horizontal layout. At present, I have applied inline CSS for formatting purposes. Oddly enough, the third chart always ends up on a separate line. Could anyone kindly point out my error? ...

Processing file names with Gulp

Is there a way to use the filenames retrieved from gulp.src, create in-memory files based on those names, and then pipe that stream to another destination? For example, I am looking to gather all *.styl files and add each file path to an in-memory file wi ...

Issue with Angular's ngOnChanges Lifecycle Hook Preventing Function ExecutionWhen attempting to run a function within Angular's ngOn

In the midst of my evaluation process to ensure that specific values are properly transmitted from one component to another using Angular's custom Output() and EventEmitter(), I am encountering some issues. These values are being sent from the view of ...

Looking to switch from using HTTP to HTTPS in Node.js on localhost... encountering a few error messages

I'm facing an issue with integrating my code into the entire localhost project "app." It works fine with a simple implementation: https.createServer(options) But when I try to run it within the "app" project using the following setup: const server = ...

The feature to toggle push notifications is missing in Xcode 11, and is also not available in the capability settings

I'm currently developing an Ionic project and trying to incorporate FCM Push notifications. I am unable to locate the toggle push notifications option in the signing & Capabilities tab in Xcode. ...

Discover the best method for transferring MySQL data between pages

Can anyone help guide me in the right direction on how to allow a user to click a link within a PHP While Loop generated MySQL table and pass that data to another page? I've searched through similar questions but haven't found a solution that fit ...