Getting the value of a style using the attr method

Here is a snippet of my HTML code:

 <i id="bgcolor" style="background-color: rgb(255, 146, 180)"></i>

I am trying to retrieve the background-color value using jQuery's attr method. Here is what I have attempted so far:

$("#bgcolor").mouseleave(function(){
        var bodyColor = $(this).attr("style");

        $("body").css(bodyColor);
    });

Unfortunately, this outputs:

background-color: rgb(255, 146, 180);

Adding this directly to my CSS does not work. How can I successfully achieve this task?

jqueryhtmlcssattr

Answer №1

To find more information on the .css method, refer to this documentation: http://api.jquery.com/css/

var pageBackground = $(this).css("backgroundColor");

Answer №2

This is the solution you've been seeking (this snippet is functional):

$("#bgcolor").mouseleave(function(){
    var bodyBgColor = $(this).attr("style");
    $("body").attr("style", bodyBgColor);
});

However, it's recommended to replace attr with css in order to improve the code efficiency:

$("#bgcolor").mouseleave(function(){
    var bodyBgColor = $(this).css("background-color");
    $("body").css("background-color", bodyBgColor);
});

JSFiddle link

Answer №3

Here's a handy solution for you: simply swap out your 

$("body").css(bodyColor);

With this instead:

$("body").attr('style', $(this).attr("style"));

This will effectively update the style to match that of another object.

Answer №4

One way to retrieve the color is by using the following code: 

$("#bgcolor").css("backgroundColor");

Answer №5

See the live demo here

$("#bgcolor").mouseleave(function(){
    var bodyColor = $(this).css("background-color");
    $("body").css("background-color", bodyColor);
});

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 technique for causing this element to move in reverse?

How can I utilize JS to halt the interval and direct the alien to move backwards once it reaches 700px? I am aware that CSS can achieve this, but I prefer a strictly JS approach. I am struggling with stopping the interval as it hits the left position of 70 ...

javascripthtmlcss

Having trouble getting user input?

I'm facing a dilemma because I am unsure of how to capture the user's input. Currently, my objective is simply to display what the user types into an input box without performing any calculations. var x = document.getElementById('textboxone ...

javascripthtml

Text files only update once refreshed

My goal is to provide users with the ability to download an XML file containing coordinate information. To achieve this, I have created a download button using the following code: <a download href='XML_Data.xml'><input type='button ...

phphtmlmysql

Tips for addressing flickering issues when scrolling on your device

I am facing an issue with two elements that are set to a fixed position on the page. When these elements reach the bottom of the page, I want them to revert back to a static position using JavaScript. The problem occurs when trying to scroll by clicking a ...

javascriptjqueryhtmlcss

How can we assign various class names depending on the value of an object?

I have a set of objects stored in my component. I need to dynamically apply different classes based on the value of the ErrorLevel property within each object. If an object has ErrorLevel equal to 1, I want to assign the following classes to various elemen ...

cssangularsass

Display the output returned from the AJAX request (HTML and/or JavaScript)

How can I effectively render content from an ajax call when the response may include html and/or javascript? I used to rely on document.write() for synchronous calls, but now that I need to use asynchronous calls, I have to find a different approach to dis ...

javascripthtmlajax

Navigate to a specific section of the page by scrolling when linked to an id

Just getting started with web development and using Bootstrap to build this site. I'm working on a single-page site where the top navbar directs users to specific IDs. The issue I'm facing is that I want the page to scroll to the ID when clicked ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it feasible in JavaScript to restrict selecting only complete nodes within a range selection?

Is it possible to prevent the selection of a partial node in JavaScript range selection? For instance: "The massive dog ran across the street." When a user selects "dog", their selection may inadvertently include neighboring words li ...

javascriptjqueryrangeselection

Troubleshooting directive not functioning properly with AngularJS ng-click

My HTML img tag is not responding to ng-click when clicked. I'm puzzled by this issue occurring in masonryPictureView.html Main page - home.html <ng-masonry> <ng-picture ng-items="projectdescription.pictures"></ng-picture> </n ...

javascripthtmlangularjsangularjs-directiveangularjs-ng-click

Tips for perfectly centering a SPAN element within a DIV both vertically and horizontally

Here is an example of my HTML code: <div id="slideClick"> <div style="padding: 0; margin: 0 auto; width: 100%; height: 100%; text-align: center; border: 1px solid blue;"> <span class="sideMsg">MESSAGES</span> </d ...

htmlcss

Angular's alternative to JQUERY for handling file uploads and multipart forms

My multipart form includes a simple file upload: https://i.sstatic.net/sRFH7.png I would like to customize it to appear like this: https://i.sstatic.net/dMiDS.png Although my initial solution works well, here is the code snippet: HTML snippet <div ...

javascriptjqueryangularjs

Ways to eliminate underline from a link on hover

Whenever I hover over a link, it seems to be underlined and the text-decoration: none; doesn't seem to work, possibly due to Bootstrap I attempted to use !important as well as :hover but unfortunately, it had no effect header .container #porfolio ...

css

Tips on expanding the space between words in a scrolling "marquee" text

Looking for some assistance with my jQuery project involving a horizontal scrolling "marquee" text. I am currently trying to adjust the size of the gap between the phrases in the marquee. Here is an example with the phrase "HEY THERE". jQuery(document ...

javascripthtmljquerycss

How to prevent all boxes in jQuery from sliding up at the same time

I am encountering an issue with 36 boxes where, upon hovering over the title, the hidden text below it should slide up. However, all 36 boxes are sliding up simultaneously instead of just the one being hovered over. Below is the script I am currently using ...

javascriptjqueryanimationjquery-animateslide

Retrieving information from the Header element (<H></H>) with the help of Selenium

I have a website with the following code snippet: <div class="list_item_normal"> <div class="main_content"> <div class="img_wrap"> <a href="/home/Detaljer/9781118093757"><img alt="Miniaturebillede af omslaget til Op ...

javahtmlcssselenium

JavaScript variables can be declared as static to maintain a fixed value throughout the

Creating a signup and signin process using HTML and Javascript involves having two HTML pages - one for sign up and one for sign in, along with a shared Javascript file. The challenge is accessing a variable from the sign up page on the sign in page after ...

javascripthtml

Applying a blur effect using CSS to all divs underneath

I have multiple divs and would like to apply a blur effect to all of them simultaneously. However, currently only the first div with the blur effect class is affected by the blur. When I click the button, I want the text "hello world" to become blurred. U ...

javascripthtmlcss

How can we combine Angular Gradients and CSS Webkit Gradients for a modern design

Can a gradient be created that resembles the color picker style shown here? The outer part showing full saturated, 50% brightness values and transitioning towards the inside to 100% brightness. https://i.sstatic.net/ohuF4.jpg ...

csscolorsgradientcolor-picker

Express serving Node JS HTML pages

I am currently developing a multiplayer game where a server connects two clients to battle against each other. Everything seems to be working smoothly so far. However, I now have the task of integrating a welcoming page where players can input their userna ...

javascripthtmlnode.jsexpress

The jQuery Datepicker fails to automatically refresh the input field with the selected date

Despite extensively browsing through all the SO topics and trying out various solutions, I still can't seem to grasp the behavior of the jQuery Datepicker. The information page at http://jqueryui.com/datepicker/#default also showcases this confusing a ...

jqueryjquery-uidatepicker