Ways to define a variable based on a CSS class attribute?

Question

Ways to define a variable based on a CSS class attribute?

I need help figuring out how to create a variable in my script that is defined by the width attribute of a CSS class. The snippet I have currently doesn't seem to work as expected.

var dist = $('.nav').css(width());

The goal of my script is to slide the .nav class when clicked. The issue arises because I'm using @media queries to adjust the width of .nav, which is the exact value I need for the sliding functionality. My approach here is to set the variable "dist" based on the width attribute of .nav - this way, I can simply use "dist" as the slide distance in the function.

I feel like what I'm attempting should be straightforward, yet I might be way off track. Is there a simpler method I should consider instead?

javascript jquery css

Answer 1

Answer №1

When you call width, it is not a function on its own and cannot be passed as an argument to the css method. If you are looking to retrieve the width of an element, you can either pass the string "width" into the css method, or use the jQuery width function directly:

var dist = $('.nav').css("width");
// or
var dist = $('.nav').width();

Answer 2

When you call width, it is not a function on its own and cannot be passed as an argument to the css method. If you are looking to retrieve the width of an element, you can either pass the string "width" into the css method, or use the jQuery width function directly:

var dist = $('.nav').css("width");
// or
var dist = $('.nav').width();

Ways to define a variable based on a CSS class attribute?

Answer №1

Similar questions

Choosing the most suitable stylesheet in Angular 8 when multiple CSS files are present

What's the connection between CSS and frameset?

Executing Node.js Function from an External File Dynamically

Adjust the width of the table's td elements

Jquery animation is dragging its feet on Explorer, while other browsers are zipping along

A step-by-step guide on submitting a CSV file with Ajax along with additional form information

Ways to efficiently populate HTML elements with JSON data

The setInterval() function is not functioning properly when used with PHP's file_get_contents

Encode session data for Ajax requests

Is JSONP functioning properly in Chrome but not in Firefox or Internet Explorer?

Using JQuery and Javascript to retrieve information from one drop down list based on the selection made in another drop down

Tips for designing a navbar specific to a profile section

Utilizing Express REST API with Postgres through the HTTP method

Using JavaScript to choose an option within an optgroup

Using CSS with multiple background images and the "contain" property

Enhance your text area by incorporating text using jQuery

Ways to stop a hyperlink from executing on confirmation cancel using jquery

Using GSAP to create a staggered animation with a negative delay

Bring in d3 along with d3-force-attract

CSS3 Animation displaying text color change on various elements in a continuous loop