Selecting CSS Properties with jQuery

Question

Selecting CSS Properties with jQuery

I am trying to make an image change color to blue and also change the background color to blue when it is clicked inside a div. However, my code doesn't seem to be working as expected. Is there a more efficient way to apply CSS to elements?

FIDDLE

var photo = $('#photo');
var html = $('html');
var bg = $('#bg');
$(photo).on('click', function(){
  $(this).hide()
  .delay(600)
  .fadeIn(300);
  $(html, bg).css({
    background :'blue'
  });
});

html

<div id='bg'>
    <img id='photo' src="http://img.pixland.uz/u11878f337693s.jpg" alt="" />
</div>

jquery css

Answer 1

Answer №1

Aside from the answer provided by Rohan Kumar, which is undoubtedly accurate, there exists a technique for merging jQuery selections: $.fn.add. This method allows you to input an HTML element, an array of elements, a jQuery selection, a jQuery selector, or an HTML string. You could utilize one of the jQuery objects you have created in this scenario:

In this instance, you could perform the selection using html.add(bg):

var photo = $('#photo');
var html = $('html');
var bg = $('#bg');
photo.on('click', function(){
  $(this).hide()
  .delay(600)
  .fadeIn(300);
  html.add(bg).css({
    background :'blue'
  });
});

Check out the demonstration on jsFiddle

Answer 2

Aside from the answer provided by Rohan Kumar, which is undoubtedly accurate, there exists a technique for merging jQuery selections: $.fn.add. This method allows you to input an HTML element, an array of elements, a jQuery selection, a jQuery selector, or an HTML string. You could utilize one of the jQuery objects you have created in this scenario:

In this instance, you could perform the selection using html.add(bg):

var photo = $('#photo');
var html = $('html');
var bg = $('#bg');
photo.on('click', function(){
  $(this).hide()
  .delay(600)
  .fadeIn(300);
  html.add(bg).css({
    background :'blue'
  });
});

Check out the demonstration on jsFiddle

Answer 3

Answer №2

When utilizing a photo as a jQuery object, there is no need to use a $ for the photo again. You can try implementing it like this:

var photo = '#photo';
var html = 'html';
var bg = '#bg';
$(photo).on('click', function(){
    $(this).hide()
    .delay(600)
    .fadeIn(300);
    $(html+','+ bg).css({
    // combine multiple selectors into one
        background :'blue'
    });
});

For more information on using multiple selectors, you can refer to multiple-selectors.

Check out the Live Demo for a visual representation.

Answer 4

When utilizing a photo as a jQuery object, there is no need to use a $ for the photo again. You can try implementing it like this:

var photo = '#photo';
var html = 'html';
var bg = '#bg';
$(photo).on('click', function(){
    $(this).hide()
    .delay(600)
    .fadeIn(300);
    $(html+','+ bg).css({
    // combine multiple selectors into one
        background :'blue'
    });
});

For more information on using multiple selectors, you can refer to multiple-selectors.

Check out the Live Demo for a visual representation.

Selecting CSS Properties with jQuery

Answer №1

Answer №2

Similar questions

Breaking down a div with jQuery - tips and tricks!

Position a div element on top of Google Maps to create a floating

jquery-ui allowing to resize child divisions as well

Transferring data from a class method to a React component

How can I use Angular 7 to create a background image for a View made up of multiple components?

Saving the selections from two drop-down menus into a single variable

Switch between divs based on the current selection

On the same line, there are two divs with different characteristics - one dynamically changing width and the

What is the reasoning behind excluding any JavaScript code between the <script> tags when our intention is solely to incorporate an external JS file?

Creating a sleek navigation menu using Bootstrap 4

Ways to retrieve the value of a table cell without a specific class using Jquery

Tips for populating input fields with retrieved data when the fields are generated dynamically

Customize Google Chrome to display a vibrant splash screen instead of a boring white blank page when

Switch between Fixed and Relative positions as you scroll

Unable to attach click handler

Issues with CSS rendering in the Chrome browser are causing display problems

Updating a Rails form with a dynamically changing belongs_to select field

jQuery GetJson fails to execute success function

Is there a way in JQuery to apply the CSS of one element to another selected element?

Tips on creating a "CSS3 blink animation" using the visibility attribute