How can I retrieve the background color code of a specified element?
var backgroundColor = $(".element").css("background-color");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element" style="background-color: #f5b405"></div>Desired Output:
#f5b405
Click on the link below to see an example and then click on the div to retrieve the color value in hex.
var color = '';
$('div').click(function() {
var x = $(this).css('backgroundColor');
hexc(x);
console.log(color);
})
function hexc(colorval) {
var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
delete(parts[0]);
for (var i = 1; i <= 3; ++i) {
parts[i] = parseInt(parts[i]).toString(16);
if (parts[i].length == 1) parts[i] = '0' + parts[i];
}
color = '#' + parts.join('');
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='div' style='background-color: #f5b405'>Click me!</div>View a working demo at http://jsfiddle.net/DCaQb/
If you're looking for a workaround, there's a clever trick you can use with the HTML5 canvas. It involves having the canvas parse color values for properties like strokeStyle and fillStyle when they are being set:
var ctx = document.createElement('canvas').getContext('2d');
ctx.strokeStyle = 'rgb(64, 128, 192)';
var hexColor = ctx.strokeStyle;
function retrieveBackgroundColor($elements) {
var bColor = "";
while ($elements[0].tagName.toLowerCase() != "html") {
bColor = $elements.css("background-color");
if (bColor != "rgba(0, 0, 0, 0)" && bColor != "transparent") {
break;
}
$elements = $elements.parent();
}
return bColor;
}
functions properly on Chrome and Firefox browsers
Your color is ready, now you just need to transform it into the desired format.
Check out this helpful script that can help you with converting colors:
Without a specified definition of background-color for a particular element, Chrome defaults to rgba(0, 0, 0, 0), whereas Firefox defaults to transparent.
My unique and innovative approach
CSS
<div style="background-color:#f5b405"></div>
JavaScript
$(this).css("background-color");
Outcome
#f5b405
Expanding upon @Newred's suggestion.
In case your style includes additional properties beyond just background-color, you can try the following:
$(this).attr('style').split(';').filter(entry => entry.startsWith('background-color'))[0].split(":")[1]
This innovative solution combines ideas from @Newred and @Radu Diță, but is designed to handle non-standard cases with ease.
$(this).attr('style').split(';').filter(item => item.startsWith('background-color'))[0].split(":")[1].replace(/\s/g, '');
An important point missed by both individuals is the absence of space between 'background-color:' and the color value itself.
All of the following examples will be correctly processed by the code above.
background-color: #ffffff
background-color: #fffff;
background-color:#fffff;
After attempting to follow a tutorial on creating tables with React for my React Native app, I consistently encountered errors such as "Invariant Violation: View config not found for name th." Even when trying to run the source code provided in the tutoria ...
Check out this code snippet: .signin-input{ input{ width: 100%; height: 2.5rem; color: black; :placeholder-shown{ opacity: 1; } } The CSS result looks like t ...
When utilizing the jQuery full calendar, I need to dynamically set events based on data obtained from a database. To achieve this, I am using data attributes to assign values and then display them on the calendar. Below is an example of my html twig code: ...
Has anyone tried creating a D3 pie component within each node of a tree? I've managed to build the tree and a single pie separately, but I'm struggling to combine them. My JSON data looks like this: window.json = { "health": [{ "value" ...
I am currently working on an Angular application using the MEAN stack. Here's a scenario: imagine you have an express route that queries the database and sends the results back in the response: app.get('/api', function(req, res){ Todo.f ...
The desired outcome is for the code to print the id of the selected div, but it's not working as expected. I've reviewed it multiple times but couldn't pinpoint the error. Any assistance would be greatly appreciated. Here is the HTML: < ...
I am attempting to transform my select dropdown menu into an unordered list (ul) in order to create a bootstrap button that will display the ul, allowing the list items to function as options. <select id="sortField" onchange="refreshPage('{$pageBa ...
Struggling with creating an Alexa skill that utilizes a Node.JS API with a module requiring npm installation? Unable to upload the node modules due to the absence of an upload button and console for npm install? Seeking guidance on how to proceed? ...
My challenge lies in utilizing the isPropertyUpdated function within Angular 4. However, I have encountered a roadblock as Angular 4 does not facilitate deep imports. An example of an import that fails to work on Angular 4 is: import {isPropertyUpdated} ...
Just starting to learn angularjs and I've created a page with 2 tabs using directives. I'm using $http to fetch json data from my server. My issue is that I don't want to make a request to the server until the user decides to view the other ...
I have not specified a hover color in the stylesheet for links to be #EEEEEE. I want the navbar hover effect to blend in with the navbar background, creating a seamless transition when hovered over. For reference, here is my current stylesheet code: Paste ...
Is there a way to achieve a promotional slide-up similar to the one showcased below using the features provided by Bootstrap/jQuery? https://i.sstatic.net/ZMLeD.png ...
As I am new to JSON and Ajax, the question I have may seem basic. When I try to display data from my JSON object containing 'name', 'task', 'date', and 'status' using Ajax, it does not show up on my page. Below is m ...
I am attempting to change the class of an iframe (soundcloud embedded track) when it is clicked, in order to apply different properties. However, my code doesn't seem to be working as expected. Here is what I have: Here is a snippet from my index.htm ...
Issue with the sidebar causing whitespace on mobile devices, and scroll properties need to be removed. When expanding the sidebar, white space appears below it. Various display modes have been tried, but they all push elements below instead of keeping th ...
I'm currently delving into the world of TypeScript and I am unsure about how to specify a function parameter as a function type. For instance, in this piece of code, I am passing a setState function through props to a child component. const SelectCity ...
Within my view file, I have the following code snippet: <a href="/logout" role="button" class="btn btn-lg btn-primary left-button">Logout</a> Inside my app.js file, I have implemented the following route for loggi ...
I'm struggling with converting this code into an Ajax form. Can someone guide me on the process? @using (Html.BeginForm("", "CollaborativeProjects", FormMethod.Post, new {enctype="multipart/form-data"})) { <input type="file" name="FileUpload1 ...
Is there a way to dynamically fetch values from a database and display them in text boxes without the need to refresh the page? Here is the PHP code snippet I have been working on: <?php include 'Connection.php'; $sql = mysqli_query($conn ...
Currently, I am developing a Web Application that interacts with my PostgreSQL database. However, when I navigate to the main page, it should display the first element from the 'actor' table, but unfortunately, nothing is being retrieved. Below i ...