Discovering a CSS value using jQueryUncovering the CSS value with jQuery

Question

Discovering a CSS value using jQueryUncovering the CSS value with jQuery

Currently, I have a script that allows me to change the color of an event in a calendar to red when clicked.

 eventClick: function(calEvent, jsEvent, view) {
   $(this).css('border-color', 'red');
 }

Now, I want to enhance this feature by enabling the user to cycle through different colors with each click, starting from red and moving to green, then blue, yellow, etc.

     eventClick: function(calEvent, jsEvent, view) {
       if current color is red, change to green;
       else if current color is green, change to blue;
       etc.
 }

Essentially, I need to determine the current color and switch it accordingly among a set of predefined colors, which will be limited to about 5 options.

javascript jquery css json

Answer 1

Answer №1

To accomplish this task, follow these steps:

$("#id").css("border-left-color")

The code snippet above will result in an empty string being returned.

$(this).css('border-color');

The border-color property is a shorthand for setting the individual properties of border-top-color, border-right-color, border-bottom-color, and border-left-color. In order to retrieve the border-color value, you must specify a particular side. For example, to retrieve the border-left-color, use $("#id").css("border-left-color"). This method should work fine assuming all sides have the same color.

Answer 2

To accomplish this task, follow these steps:

$("#id").css("border-left-color")

The code snippet above will result in an empty string being returned.

$(this).css('border-color');

The border-color property is a shorthand for setting the individual properties of border-top-color, border-right-color, border-bottom-color, and border-left-color. In order to retrieve the border-color value, you must specify a particular side. For example, to retrieve the border-left-color, use $("#id").css("border-left-color"). This method should work fine assuming all sides have the same color.

Answer 3

Answer №2

In order to retrieve a value without setting it, you can use the same function call as the setter:

$(this).css('border-color');

If you need more information on this method, you can visit http://api.jquery.com/css/

It's important to note that the returned value from the getter may not always match your expectations. According to the documentation:

The computed style of an element might differ from the specified value in a stylesheet. For instance, dimension styles are typically in pixels though they could be em, ex, px or %. Different browsers may return CSS color values that are technically equivalent but not identical, such as #FFF, #ffffff, and rgb(255,255,255).

To avoid issues with getting incorrect values, it is recommended to assign colors to specific classes and then manage them accordingly.

For a practical example, check out @zzzzBov's demonstration on jsFiddle: http://jsfiddle.net/cT3c5/

Answer 4

In order to retrieve a value without setting it, you can use the same function call as the setter:

$(this).css('border-color');

If you need more information on this method, you can visit http://api.jquery.com/css/

It's important to note that the returned value from the getter may not always match your expectations. According to the documentation:

The computed style of an element might differ from the specified value in a stylesheet. For instance, dimension styles are typically in pixels though they could be em, ex, px or %. Different browsers may return CSS color values that are technically equivalent but not identical, such as #FFF, #ffffff, and rgb(255,255,255).

To avoid issues with getting incorrect values, it is recommended to assign colors to specific classes and then manage them accordingly.

For a practical example, check out @zzzzBov's demonstration on jsFiddle: http://jsfiddle.net/cT3c5/

Answer 5

Answer №3

Here is a quick way to retrieve a CSS property from an element:

const box = document.querySelector('.box'),
style = window.getComputedStyle(box),
background = style.getPropertyValue('background-color');

Try it out on JSFiddle!

Answer 6

Here is a quick way to retrieve a CSS property from an element:

const box = document.querySelector('.box'),
style = window.getComputedStyle(box),
background = style.getPropertyValue('background-color');

Try it out on JSFiddle!

Answer 7

Answer №4

I suggest entrusting all styling tasks to CSS. Utilizing toggling classes instead of setting inline styles via JavaScript is a more effective method for modifying styles, as it allows you to make changes without affecting the JS code.

It would be ideal to delegate the event handler in order to use different callbacks for various selectors.

If you are limited to using the same callback, you can still switch between classes by checking the state within the click callback:

eventClick: function(calEvent, jsEvent, view) {
    var $this,
        add;
    if ($this.is('.a')) {
        add = 'b';
    } else if ($this.is('.b')) {
        add = 'c';
    } else {
        add = 'a';
    }
    $this.removeClass('a b c').addClass(add);
}

Answer 8

I suggest entrusting all styling tasks to CSS. Utilizing toggling classes instead of setting inline styles via JavaScript is a more effective method for modifying styles, as it allows you to make changes without affecting the JS code.

It would be ideal to delegate the event handler in order to use different callbacks for various selectors.

If you are limited to using the same callback, you can still switch between classes by checking the state within the click callback:

eventClick: function(calEvent, jsEvent, view) {
    var $this,
        add;
    if ($this.is('.a')) {
        add = 'b';
    } else if ($this.is('.b')) {
        add = 'c';
    } else {
        add = 'a';
    }
    $this.removeClass('a b c').addClass(add);
}

Discovering a CSS value using jQueryUncovering the CSS value with jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a hierarchy to be followed within the <head> element?

Parsing JSON with Jackson to deserialize Commons MultiMap

Node.js UDP broadcast to subnet not working properly in Linux

Issue when Updating Component State: React child cannot be an object

What is the best way to merge an array of objects into a single object?

Unlocking secure content with Ajax

The scrollbar track has a habit of popping up unexpectedly

Is there a way to initiate an AJAX post request with the Authorization header for the initial request using Windows Authentication?

Displaying the current time and total time of a custom video player using Javascript

Is it advisable to substitute setTimeout with node-schedule in a node.js environment?

Make sure to always target a specific DIV element, regardless of whether any of its child divs are

Enhancing bar chart presentation with text in d3

A novel RxJS5 operator, resembling `.combineLatest`, yet triggers whenever an individual observable emits

Easily Update Your Div Content by Simply Clicking a Single Link/Button

initiate scanning for HTTP GET calls

The Angular UI Datepicker is not reflecting changes in scope variables within the dates-disabled function

Determine the yearly timetable by comparing it with the present date in MVC4

Having numerous sections condensed into one cohesive page

Identifying shifts in offsetTop

Select a CSS design with C# coding in ASP.net