0

使いたい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>
4

1 に答える 1

0

ここでの問題は、実際に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>

于 2015-07-18T12:42:21.827 に答える