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