IE9中的getPropertyValue无法启动？

Question

I want to use transition and transform to make a slider. I use the getPropertyValue to check the current slide. It works fine in Chrome, but in the IE9 it shows an error: TypeError: Cannot read property '0' of null (I marked the line with **)

the Javascript code:

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;
        }

the HTML code:

<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

The problem here is not really the getPropertyValue() function, which is supported in IE9+.

But CSS properties like transform need vendor prefixes to work across browsers. To make it easier, you could create functions that handle them so you don't have to:

 /* 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>