A common question from our users is, is there a way to get object's style properties that are in effect at a certain point in time. (for example, it could have been inherited from higher level of hierarchy, or modified via JavaScript running on the page)? This article describes how to do this.
Say, I want to find out the color of text of an Object. Or it's display (block, none, inline) property? Is there a way to do it?

In general it is hard to get an object's runtime properties (vs. what's described in the DOM during page load), but style is an exception. For style one may get the actual computed object style that includes values assigned with JavaScript during execution, using:


This will return a string like:
color: blue; font-weight: bold;

As an example, for an element that is created as:

    <span id=sp1 style="color: blue;">sp1</span>

and then being modified with JavaScript using:

  var elem = document.getElementById("sp1");
  elem.style.fontWeight = "bold";

Then using the GetStyle() property will return the computed style that includes all changes:
color: blue; font-weight: bold;

Article Info
  • Last Updated: 7/6/2015
  • Article ID: KB163
  • Views: 563