getPropertyValue 在 IE9 中不起作用？

Posted 2023-03-06

【中文标题】getPropertyValue 在 IE9 中不起作用？

【英文标题】：getPropertyValue doesn't wok in IE9?

【发布时间】：2015-10-08 01:24:38

【问题描述】：

我想用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>

【问题讨论】：

你的console.log(text); 输出什么？

嗨，@blex 它在 Chrome 中输出 translateX(-1084px)，字符串类型中 transform 的值。但在 IE9 中什么都没有

this demo 是否可以在 IE9 中工作（我现在无法测试）？如果是，请尝试在您的代码中包含此代码。

@blex 是的！确实如此！我知道问题是 IE9 不支持transform，它需要-ms-。但现在的问题是如何使用setProperty。我可以写slider.style.setProperty("transform", "translateX(" + (-1 - nextSliderIndex) * width + "px)");slider.style.setProperty("-ms-transform", "translateX(" + (-1 - nextSliderIndex) * width + "px)");吗？

乍一看，它应该可以工作，但如果您在代码中使用需要大量前缀的属性，您可能需要创建一个自动执行此操作的函数。例如，创建一个setPrefixedProperty() 和一个getPrefixedProperty() 函数来处理这个问题，以便拥有一个更短更清晰的主脚本。

【参考方案1】：

这里的问题并不是真正的getPropertyValue() 函数，它在IE9+ 中是支持的。

但是像 transform 这样的 CSS 属性需要供应商前缀才能跨浏览器工作。为了更容易，您可以创建处理它们的函数，这样您就不必：

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

【讨论】：

这很好用。但是有一个新问题。 transform 确实更改正确，但在鼠标进入或离开幻灯片之前，幻灯片不会更改。你可以在dev.photoworld.com.cn 上查看。我使用transition 来控制IE9 不支持的动画。我认为它应该立即在 IE9 中滑动，但它没有。

@BrickYang 哦，我无法访问 URL (not found, or access denied from outside of China?)，是否有其他地址可以访问，或者您可以创建一个重现问题的 JS Fiddle？

对不起。我尝试了 JS Fiddle 但无法处理（我在 JS 中创建了很多元素和样式表，不确定是否是问题所在）。你可以试试115.28.2.132/www 吗？

@BrickYang 我看不到图像，但我看到了结构，它似乎在 Chrome 和 IE11 中工作，对吧？我现在无法测试 IE9，但我明天有时间去做。

是的，它可以在 Chrome 中运行（没有测试 IE11，但我认为应该没问题）。在 IE9 中，属性更改正确（如果您可以看到滑块底部的点，您可以发现它也正确更改），但图像不会“新鲜”，直到将鼠标移到它们上方。再次感谢。