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
Add a comment
|
4 Answers
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>
Comments
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%'
1 Comment
low_rents
but be aware that this will return a
string with the measurement unit at the end, for example '100px' or '50%'.You can simply use the '.css()' method :
$('#horizontal-scroll').css('maxWidth');
Comments
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>