When using jquery, the .css("border-color") method fails to provide a return value

Question

When using jquery, the .css("border-color") method fails to provide a return value

I came up with the jquery javascript below


$(document).mousemove(function(event) {
    var element = event.target;
    $(element).css("border","black solid 1px");
});

$(document).mouseout(function(event) {
    var element = event.target;
    console.log( "1 = "$(element).css("border-color") )
    $(element).css("border","0px");
    console.log( "2 = " + $(element).css("border-color") )
});

This code creates a border around hovered elements. Despite this, when I tried running it in Chrome, the

console.log( "1 = "$(element).css("border-color") )

and

console.log( "2 = "$(element).css("border-color") )

outputs nothing instead of black, which I expected. I tested using borderColor as well, but no success.

Despite the lack of output in the console logs, the code successfully draws frames around hovered elements. Why do you think the console is not displaying the expected color value?

jquery css border

Answer 1

Answer №1

For jquery, shorthand cannot be utilized. It is essential to provide more specific instructions, such as "border-top-color."

Please inform me if this solution is effective.

Answer 2

For jquery, shorthand cannot be utilized. It is essential to provide more specific instructions, such as "border-top-color."

Please inform me if this solution is effective.

Answer 3

Answer №2

Implement the use of jQuery(...).css(“borderTopColor”)

A successful example: http://jsfiddle.net/JvTwp/

Answer 4

Implement the use of jQuery(...).css(“borderTopColor”)

A successful example: http://jsfiddle.net/JvTwp/

Answer 5

Answer №3

$("#mytext").focus(function () {

  $(this).css({'background-color': '#FFFFCC'});

  $(this).css("border", "black solid 1px"); 

}).blur(function () {

  $(this).css({'background-color': '#fff'});
  $(this).css("border", "#DCDCDC solid 1px");

 });


<input type="text" id="mytext">

Give this a try!

Check it out here!

Answer 6

$("#mytext").focus(function () {

  $(this).css({'background-color': '#FFFFCC'});

  $(this).css("border", "black solid 1px"); 

}).blur(function () {

  $(this).css({'background-color': '#fff'});
  $(this).css("border", "#DCDCDC solid 1px");

 });


<input type="text" id="mytext">

Give this a try!

Check it out here!

Answer 7

Answer №4

An inspector can assist you in confirming the absence of a property named 'border-color'. Instead, you should be searching for 'border-[top|bottom|left|right]-color'

Answer 8

An inspector can assist you in confirming the absence of a property named 'border-color'. Instead, you should be searching for 'border-[top|bottom|left|right]-color'

Answer 9

Answer №5

When it comes to setting colors using JavaScript/jQuery, it seems like CSS alone won't cut it. Accessing border properties might be a bit tricky with jQuery, but native JavaScript does the job just fine.

console.log(this.style.borderTop); // should return '1px solid rgb(0, 0, 0)'
console.log(this.style.borderColor); // should return 'rgb(0, 0, 0)'

It seems like the outcome depends on whether the shorthand sides are identical; for example:

All sides have the same settings
top and bottom (matching each other) / left and right (matching each other)
top / left and right (matching each other) / bottom
No success when all four sides are set differently
I haven't had luck with simply using element.style.border to set the whole border at once (e.g.
```
element.style.border = '1px solid #000'
```
)

Answer 10

When it comes to setting colors using JavaScript/jQuery, it seems like CSS alone won't cut it. Accessing border properties might be a bit tricky with jQuery, but native JavaScript does the job just fine.

console.log(this.style.borderTop); // should return '1px solid rgb(0, 0, 0)'
console.log(this.style.borderColor); // should return 'rgb(0, 0, 0)'

It seems like the outcome depends on whether the shorthand sides are identical; for example:

All sides have the same settings
top and bottom (matching each other) / left and right (matching each other)
top / left and right (matching each other) / bottom
No success when all four sides are set differently
I haven't had luck with simply using element.style.border to set the whole border at once (e.g.
```
element.style.border = '1px solid #000'
```
)

Answer 11

Answer №6

It seems like the reason you are not seeing a border is because in the code snippet you shared, there is no initial border defined. Instead of relying on jQuery to create the border through events, it would be more efficient to first specify a border for the element in your .css file and then use jQuery to adjust it as necessary.

If you prefer not to set a border in your .css file, you can try the following example:

Please note that using .css("border-color") is incorrect syntax; instead, utilize camelCase. For instance:

$("element").css("borderColor", "1px solid black");

Answer 12

It seems like the reason you are not seeing a border is because in the code snippet you shared, there is no initial border defined. Instead of relying on jQuery to create the border through events, it would be more efficient to first specify a border for the element in your .css file and then use jQuery to adjust it as necessary.

If you prefer not to set a border in your .css file, you can try the following example:

Please note that using .css("border-color") is incorrect syntax; instead, utilize camelCase. For instance:

$("element").css("borderColor", "1px solid black");

When using jquery, the .css("border-color") method fails to provide a return value

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Customizing an external module class using CSS module pattern in React

Guide to modifying the behavior of a dynamic dropdown menu

Tips for manipulating the DOM: Pushing existing elements when new ones are dynamically created with JavaScript

View is unable to trigger the success attribute

Error encountered during Ajax request - two files being transmitted instead of one

Retrieve variables of chained jQuery selectors in PHP form

Update the parent node in the Google Org Chart

Center alignment is not being applied to the SVG element

What is the best way to combine two sections in html/css/bootstrap?

Prevent the wrapping of table cells in CSS tables

Retrieve information from a database in real-time using Ajax without needing to set a refresh interval

What causes Firefox's CPU to spike to 100% when a slideshow begins that adjusts the width and left coordinates of certain divs?

Creating a Striking Multi-Layered CSS Header

How can I create a dropdown menu that is dependent on another dropdown menu using Ajax in my Laravel application?

Changing an HTML container using jQuery and Ajax to facilitate a login process

Is a non-traditional fading effect possible with scrolling?

How to place a div with 100% width at the bottom of a float with a fixed width

Cease animation if the page has already reached its destination

The div is incorrect and causing the label and input to move in the wrong direction

How can I prevent text highlighting on a website?