getPropertyValue не работает в IE9?

Question

Я хочу использовать transition и transform, чтобы сделать слайдер. Я использую getPropertyValue для проверки текущего слайда. Он отлично работает в Chrome, но в IE9 он показывает ошибку: TypeError: Cannot read property '0' of null (Я пометил строку с **)

Javascript код:

var slider = container.querySelector("ul"); 

function getCurrSliderIndex() { 
      var text = slider.style.getPropertyValue("transform"); 
      console.log(text); 
      var pattern = /[0-9]+/; 
      **var match = pattern.exec(text)[0];** 
      var intValue = parseInt(match)/width - 1; 
      return intValue; 
     } 

HTML код:

<ul id="primary-slider" class=" iuiSlider fix" style="width: 3794px; height: 271px; transform: translateX(-1084px);"> 
    <li>some content</li> 
    <li>some content</li> 
    <li>some content</li> 
... 
</ul> 

Answer 1

Проблема здесь не в том, что функция getPropertyValue(), которая поддерживается в IE9 +.

Но свойства CSS, такие как transform, нуждаются в префиксах поставщиков для работы в браузерах. Для того, чтобы сделать его проще, можно создать функции, которые обрабатывают их, так что вы не должны:

/* Declare these functions to handle the prefixes */ 
 

 
Object.prototype.setPrefixedProperty = function(prop, value){ 
 
    this.setProperty(prop, value); 
 
    this.setProperty('-moz-' + prop, value); 
 
    this.setProperty('-webkit-' + prop, value); 
 
    this.setProperty('-ms-' + prop, value); 
 
    this.setProperty('-o-' + prop, value); 
 
}; 
 

 
Object.prototype.getPrefixedProperty = function(prop){ 
 
    return this.getPropertyValue(prop) 
 
     || this.getPropertyValue('-moz-' + prop) 
 
     || this.getPropertyValue('-webkit-' + prop) 
 
     || this.getPropertyValue('-ms-' + prop) 
 
     || this.getPropertyValue('-o-' + prop); 
 
}; 
 

 
/* Use them like so: */ 
 

 
var slider = document.querySelector('div'); 
 

 
slider.style.setPrefixedProperty('transform', 'translateX(-1084px)'); 
 

 
var text = slider.style.getPrefixedProperty('transform'); 
 

 
alert(text);

<p>This demo should alert "translateX(-1084px)".</p> 
 
<div></div>