CODEWITHSUNDEEP
javascriptjquerycss
MAD
MAD

Reputation: 21

How to get the max width of my css element using javascript

I'm trying to get the max width of my CSS element by using javascript. I'm currently able to get the width but not max-width.

hsWidth = $("#horizontal-scroll").width();

Thanks

Upvotes: 0

Views: 4522

Answers (4)

Dennisrec
Dennisrec

Reputation: 333

Please try this working example

//referencing your example..
	var hsWidth = $("#horizontal-scroll").css('max-width');
	console.log(hsWidth);
#horizontal-scroll{
		height:500px;
		width:auto;
		max-width:950px;/*we want to get this...*/
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--target element-->
<div id="horizontal-scroll">
</div>

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Use jQuery method .css() :

var max_width = $("#horizontal-scroll").css('max-width');

Hope this helps.

var max_width = $("#horizontal-scroll").css('max-width');

console.log(max_width);
#horizontal-scroll{
  max-width: 250px; 
  display: block;
  background-color: green;
  width: 200px;
  height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="horizontal-scroll"></div>

Upvotes: 4

Yohann L.
Yohann L.

Reputation: 23

You can simply use the '.css()' method :

$('#horizontal-scroll').css('maxWidth');

Documentation here

Upvotes: 0

Paul Fitzgerald
Paul Fitzgerald

Reputation: 12129

You need to use css('max-width')

The following should do it for you

$('#horizontal-scroll').css('max-width');

You can find more information here in the jQuery documentation

Also, please note as per the comment by @low_rents that this will return a string with the measurement unit at the end, for example '100px' or '50%'

Upvotes: 3

Related Questions