JavaScript style property is empty

2024/2/27 9:19:31

I need to calculate the width of an element's border. If I set it explicitly (via CSS), then I can access it in JavaScript by:

    element.style.borderWidth

However, if only specify border style property (and not 'border-width') ->

    border-style: solid

Then the borderWidth property is empty. Why? My approach to calculate width is as follows:

if(element.style.borderWidth == ''){borderWidth = (offsetHeight - clientHeight)/2
}

Is there any other way to calculate border width whilst only setting border-style?

Answer

You can use the window.getComputedStyle for modern browsers

window.getComputedStyle(element).borderBottomWidth;

For IE pre-9 you will have to use an alternative

element.currentStyle.borderBottomWidth 
http://en.ppmy.cn/q/40880.html

Related Q&A

In meteor app how to add orgin=* in cordova config.xml?

I am new to meteor. I am developing mobile app with meteor. I need to add <access origin="*"/> in config.xml I am using google API works fine in browser. But when I run in android devic…

ng-map shows partial map in HTML

Im using ng-map in Angular.js For some reason my map picture is grayed out for 90% of the entire map, like so: My HTML is pretty simple: <div id="map"> <map></map> </div&…

How to add callback after dynamically loading javascript file

I have the following function:function require(url) {var e = document.createElement("script");e.src = url;e.type="text/javascript";document.getElementsByTagName("head")[0]…

Download attribute not working in Firefox but working in chrome

This fiddle is not working in firefox but working in chrome. I have tried using this : <p>Click on the w3schools logo to download the image:<p><a href="http://www.w3schools.com/imag…

IE8 errors when defining a Javascript object?

I knew IE8 was a pain, but I have never seen it give me such trouble. All I am trying to do is define a Javascript object and it causes an error, stopping all scripting from working on the page.The err…

Create CANNON.RigidBody from THREE.Mesh or THREE.Geometry

I am creating a THREE.Mesh object using a THREE.JSONLoader object like so:// Create castle. loader.load(/Meshes/CastleTower.js, function(geometry, materials) {var tmp_material = new THREE.MeshLambertMa…

jQuery conflict when removing div after page load

Im trying to remove a div from the page (preferably prevent it from loading at all) but for now Im settling on removing it after the page loads.When I try the following lines of code in jsFiddle, the #…

Formatting and pretty printing dates with jquery

I need to display dates in a couple different ways in an app built with jquery.In some situations, I need the typical "yyyy-mm-dd hh:mma" type of formatting, with all of its different permuta…

html-webpack-plugin and webpack 2: no starting slash /

I have a working webpack 1 project that I want to migrate to webpack 2.It is almost working, my main remaining problem is with html-webpack-plugin:when I use it in webpack 2, the generated script tag i…

Detecting Chrome OS with Javascript

I want to detect Chrome OS with Javascript, and Im using navigator.userAgent for this. Now, Im running Chrome OS, and my navigator userAgent is Mozilla/5.0 (X11; CrOS armv7l 6680.78.0) AppleWebKit/537.…