How to get border width in jQuery/javascript
You can just use parseInt();
to parse the border width from Npx
to N
:
var width = $elem.css('borderWidth'); // 150px
var parsed = parseInt(width); // 150
I had a Google around and it appears in order to get the width of a border you must provide an explicit side of the border:
var borderWidth = $elem.css("border-left-width");
This is because it's possible for every border to have a different size, style and colour. Unfortunately it doesn't appear to be any simpler than this.
Get 'border-width' with jQuery when 'border-style' is 'none'
You can do it without jQuery.
var element = document.getElementsByTagName('div')[0];
console.log(element.style.borderWidth);
Working example:
https://jsfiddle.net/umkwym05/
Getting Border Width in jQuery
I played around with this for a little longer and the only solution I was able to come up with which would kind-off sort out the issue is similar to this:
var thinBorder = 1;
var mediumBorder = 3;
var thickBorder = 5;
function getLeftBorderWidth($element) {
var leftBorderWidth = $element.css("borderLeftWidth");
var borderWidth = 0;
switch (leftBorderWidth) {
case "thin":
borderWidth = thinBorder;
break;
case "medium":
borderWidth = mediumBorder;
break;
case "thick":
borderWidth = thickBorder;
break;
default:
borderWidth = Math.round(parseFloat(leftBorderWidth));
break;
}
return borderWidth;
}
function getRightBorderWidth($element) {
var rightBorderWidth = $element.css("borderRightWidth");
var borderWidth = 0;
switch (rightBorderWidth) {
case "thin":
borderWidth = thinBorder;
break;
case "medium":
borderWidth = mediumBorder;
break;
case "thick":
borderWidth = thickBorder;
break;
default:
borderWidth = Math.round(parseFloat(rightBorderWidth));
break;
}
return borderWidth;
}
DEMO
Note the Math.round()
and parseFloat()
. Those are there because IE9 returns 0.99px
for thin
instead of 1px
and 4.99px
for thick
instead of 5px
.
Edit
You mentioned in the comments that IE7 has a different size for thin, medium and thick.
They seem to be off by only .5px which will be hard to deal with, seeing you most liekly need full numbers.
My suggestion would be to either simply ignore the .5px of a difference and acknowledge the most likely unnoticable imperfections when using IE7 and lower or if you are hell-bend on dealing with it to adjust the constants by that much similar to:
var thinBorder = 1;
var mediumBorder = 3;
var thickBorder = 5;
// Will be -1 if MSIE is not detected in the version string
var IEVersion = navigator.appVersion.indexOf("MSIE");
// Check if it was found then parse the version number. Version 7 will be 17 but you can trim that off with the below.
If(IEVersion > -1){
IEVersion = parseInt(navigator.appVersion.split("MSIE")[1]);
}
// Now you can simply check if you are in an ancient version of IE and adjsut any default values accordingly.
If(IEVersion < 7){
thinBorder = 0.5;
mediumBorder = 3.5;
thickBorder = 4.5;
}
/// rest as normal
Any of the above is by no means a copy-paste solution but merely a demonstration on a few ways one could deal with this issue. You would naturally wrap all those helpers into separate functions, plug-ins or extensions.
In your final solution you might even still need to deal with float off-sets and rounding issue.
This should be able to get you started though well enough.
How to set border width with jQuery?
Try it like this i have added px
and a space between X and Y
var X = 200,
Y = 100;
$('div').css('border-width',X+'px '+Y+'px');
div{
width:100px;
height:100px;
border-color:green;
border-style:solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div></div>
Better way to get the border width in javascript?
Obviously, substr(0, 2)
is not a good idea, because it won't work if the width is less than 10, or greater than 100.
Instead, just remove the "px" string (if it's there; it might not be if the value is 0):
+val.replace('px', '')
The leading +
is to convert this to a number.
But why?
The more interesting question is why you're trying to get the border width. What were you planning to do with it? Using getComputedStyle
is a bit of an anti-pattern. It often indicates that you're trying to maintain application state within CSS, which is never a good idea.
How do I get border-width of element with jquery?
first create #menu
and then addClass
, Then append to parent div , like so
var menuDiv = "<div id='menu'></div>";
menuDiv = $(menuDiv).addClass("oriz_menu");
$("div#parent").append(menuDiv);
alert($("#menu").css("border-top-width"));
Check this DEMO
jQuery CSS borderWidth
borderWidth is syntactic sugar for setting each border's width independently. You can't assume that every border's width is the same, so you need to ask for a specific border's width.
$("div").css("borderTopWidth");
Get border style with jQuery
alert($("div.myel").css("border-top-style"));
http://jsfiddle.net/jbrooksuk/YJQAS/
It seems that you're unable to get the whole border style in one go. You need to explicitly state which part of it you want.
Get width of element with jquery when using border-box
This demo rule out that jQuery doesn't give width. It gives.
$(document).ready(function(){
var beforeBorderBox = $('.holly-molly').outerWidth();
$('.holly-molly').append('<p>beforeBorderBox:'+ beforeBorderBox + '</p>');
var afterBorderBox = $('.holly-molly').css('box-sizing', 'border-box').outerWidth();
$('.holly-molly').append('<p>afterBorderBox:'+ afterBorderBox + '</p>');
});
.holly-molly {
background: tomato;
min-height: 80px;
text-align: center;
color: #fff;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holly-molly">
<span>Holly Molly</span>
</div>
Related Topics
How to Post Urlencoded Form Data With $Http Without Jquery
How to Check If a Variable Is an Array in JavaScript
Is the JavaScript Date Object Always One Day Off
Getting JavaScript Object Key List
How to Make Console.Log Show the Current State of an Object
Why This JavaScript Regex Doesn't Work
Check If an Array Contains Any Element of Another Array in JavaScript
No Visible Cause For "Unexpected Token Illegal"
Group Array of Object Nesting Some of the Keys With Specific Names
How to Connect to SQL Server Database from JavaScript in the Browser
Can't Perform a React State Update on an Unmounted Component
How to Check Whether a Radio Button Is Selected With JavaScript
How to Invoke a Jsf Managed Bean on a HTML Dom Event Using Native JavaScript
Create a Date With a Set Timezone Without Using a String Representation