How to replace IE8 css expressions with javascript

Question

Actualy I have applied css styles with expressions. But now in IE8 its not getting applied. How to fix this using css,javascript?

.fixedHeaderTr1     
  {   
  z-index:11;    
  position:relative;
  top:expression(this.offsetParent.scrollTop);   
  border: 1;  
  };       

  .fixedHeaderCol1     
  {
  position:relative;
  z-index:11;
  left:expression(this.parentElement.offsetParent.scrollLeft);     
  }; 

  .fixedDataCol1{
   LEFT:expression(this.parentElement.offsetParent.parentElement.scrollLeft);
   position:relative;
   z-index:11;
   background-color:#f3f7fe; 
   }
   .fixedDataCol12{
   LEFT:expression(this.parentElement.offsetParent.parentElement.scrollLeft);
   position:relative;
   z-index:11;
   background-color:#f9f9f9;  
   }

Hi Can you please explain me clearly how to get the values. I am new to javascript, and I am learning. It will be great if you could LEFT:expression(this.parentElement.offsetParent.parentElement.scrollLeft); explain me how to sort this part. and assign value to left — Janani sridhar, Mar 06 '17 at 10:20

score 1 · Answer 1 · edited May 23 '17 at 11:46

Important Dynamic properties (also called "CSS expressions") are no longer supported in Internet Explorer 8 and later, in IE8 Standards mode and higher. This decision was made for standards compliance, browser performance, and security reasons. Dynamic properties are still available in Internet Explorer 8 in either IE7 mode or IE5 mode. (For more information about document compatibility modes, see Defining Document Compatibility.) Because Internet Explorer 8 in IE8 mode is fully compliant with the Cascading Style Sheets, Level 2 Revision 1 (CSS2.1) standard, most dynamic properties written to work around Cascading Style Sheets (CSS)-related shortcomings in previous versions of Internet Explorer should no longer be needed. Other dynamic properties with more specific uses can generally be replaced with standard JavaScript.

https://msdn.microsoft.com/en-us/library/ms537634(v=vs.85).aspx

Example of js replacement:

document.getElementsByClassName('fixedHeaderCol1')[0].style.left = this.parentElement.offsetParent.scrollLeft;

Also see: https://stackoverflow.com/a/30102325/5758328

I'd even recommend to not use `this` – evolutionxbox Mar 06 '17 at 11:08 — evolutionxbox, Mar 06 '17 at 11:08

How to replace IE8 css expressions with javascript

1 Answers1