getPropertyValue doesn't wok in IE9?

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>

Hi, @blex it output `translateX(-1084px)` in Chrome, the value of the `transform` in string type. but nothing in IE9 — Brick Yang, Jul 18 '15 at 11:47
Does [**this demo**](http://jsfiddle.net/2L6fqne1/) work in IE9 (I can't test it now)? If it does, try including this code in yours. — blex, Jul 18 '15 at 11:57
@blex yes! it does! I awared the problem is IE9 doesn't support `transform`, it requires the `-ms-`. But now the problem is how can I use the `setProperty`. Can I just write `slider.style.setProperty("transform", "translateX(" + (-1 - nextSliderIndex) * width + "px)");` `slider.style.setProperty("-ms-transform", "translateX(" + (-1 - nextSliderIndex) * width + "px)");`? — Brick Yang, Jul 18 '15 at 12:10
At first sight, it should work, but if you use properties that need a prefix a lot in your code, you might want to create a function that automatically does it. For example, create a `setPrefixedProperty()` and a `getPrefixedProperty()` function to handle this, in order to have a shorter and cleaner main script. — blex, Jul 18 '15 at 12:20

score 0 · Accepted Answer · answered Jul 18 '15 at 12:42

0

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>

answered Jul 18 '15 at 12:42

blex

24,941
5
39
72

this works great. But there's a new problem. the `transform` do changed correctly, but the slide doesn't changed until the mouse enters or leaves the slide. you could check it at http://dev.photoworld.com.cn/ . I use `transition` to control the animation which doesn't be supported in IE9. I thought it should slide immediately in IE9 but it doesn't. – Brick Yang Jul 18 '15 at 12:47
@BrickYang Oh, I cannot access the URL ([not found, or access denied from outside of China?](http://downforeveryoneorjustme.com/http://dev.photoworld.com.cn/)), is there another address where this can be accessed, or could you create a [JS Fiddle](http://jsfiddle.net/) that reproduces the problem? – blex Jul 18 '15 at 12:50
sorry. I tried JS Fiddle but cannot handle it(I create a lot of elements and stylesheet in JS, not sure if it's the problem). Could you try http://115.28.2.132/www/ ? – Brick Yang Jul 18 '15 at 13:05
@BrickYang I cannot see the images, but I see the structure, and it seems to be working in Chrome and IE11, right? I can't test IE9 right now, but I'll have some time to do it tomorrow. – blex Jul 18 '15 at 13:12
yes it woks in Chrome(didn't test IE11 but I think it should be fine). In IE9 the property changed correctly(if you can see the dots at the bottom of the slider, you can find it changed correctly too), but the images don't "fresh" until move mouse over them. thanks again. – Brick Yang Jul 18 '15 at 13:17

getPropertyValue doesn't wok in IE9?

1 Answers1