Why Element.Style Always Return Empty in Js

Why element.style always return empty in JS?

element.style returns the inline style used in html document and since the style is not set directly in html you will get and empty value

What you are looking for is the computedStyle which will returns the style that is applied to the element

console.log(window.getComputedStyle(document.getElementById('test')).display)

#map {      display: block;      align-content:center;    }

<div id="test">test</div>

why javascript this.style[property] return an empty string?

The .style property is for getting styles that were placed directly on the element. It doesn't compute styles from your stylesheets.

You may use getComputedStyle() instead:

const myElement = document.getElementById('myId');
const style = getComputedStyle(myElement);
console.log(style.height); // "100px"

why element.style.backgroundColor property gives an empty string as a result?

.style contains only inline styles (set via that property, or the HTML attribute with the same name). It's not affected by style sheets at all. getComputedStyle gets you the current effective value for that property, regardless of where it came from.

The JavaScript style class return empty string

The .style object only includes style properties directly set on the DOM element. Properties determined from CSS are not visible that way.

Javascript style.left is empty string

Why would this be?

Presumably because it hasn't been set to anything.

Isn't style.left supposed to return an integer?

No. It is supposed to return a string containing the value of the CSS left property as set directly on the element (either by setting the JS property itself or by using a style attribute). It does not get a value from the cascade and it should only be an integer if the value is 0 (since all other lengths require units).

See How to get computed style of a HTMLElement if you want to get the computed value for the property rather than what I described in the previous paragraph.

Why browser is returning empty string on style.height ? How to get actual height of an element?

When you use this.style.height, the height must have been specified on the element first, like this:

<div style="height: 15px;" onclick="alert(this.style.height)">sometext</div>

Otherwise, you should probably use offsetHeight or clientHeight:

<div onclick="alert(this.offsetHeight)">sometext</div>

js style properties returns blank

You probably try to get the value which was set in stylesheet, not directly like this:

document.getElementById(<idOfObject>).style.width = '100px';

If you want to get the width of the element you can use innerWidth property:

var width = document.getElementById(<idOfObject>).offsetWidth;

myDiv.style.display returns blank when set in master stylesheet

If you access to a DOM Element via JS(using for example getElementById) you'll not be able to read the computed style of that element, because it is defined inside the CSS file. To avoid this, you have to use property getComputedStyle(or currentStyle for IE).

function getStyle(id, name)
{
    var element = document.getElementById(id);
    return element.currentStyle ? element.currentStyle[name] : window.getComputedStyle ? window.getComputedStyle(element, null).getPropertyValue(name) : null;
}

Usage(JSFiddle):

var display = getStyle('myDiv', 'display');
alert(display); //will print 'none' or 'block' or 'inline' etc

$elem..style.display always returns empty string

I have visited your website and I tried the following code.

document.querySelector("#cookie-law-info-bar").style.display // returend block

Once try this

Why are all of my DOM element properties coming back as empty strings?

You can use getComputedStyle and getPropertyValue. element.style will refer to the style attribute on the element (inline styles), and your CSS isn't inline.

window.addEventListener("load", function(){   var element = document.getElementsByClassName("js-child")[0];   var rightPosition = window.getComputedStyle(element).getPropertyValue('right');  console.log(rightPosition)});

.parent {   position: relative;}
.child {   position: absolute;   right: -220px;   top: 0;   transition: all 0.5s ease;}

<div class="parent">   <div class="child js-child">   </div></div>

---

Related Topics