IE和Firefox下Javascript的兼容写法小结

在编写Javascript代码时，我们需要确保它在不同浏览器下都能正确运行。然而，不同浏览器对Javascript的支持程度存在差异，所以必须了解不同浏览器的兼容性问题，同时掌握一些在各浏览器下都能正常工作的兼容写法。

下面将结合两个具体实例介绍在IE和Firefox下Javascript的兼容写法。

实例1：事件绑定

在IE浏览器中，可以使用attachEvent方法绑定DOM元素的事件，如下所示：

var btn = document.getElementById('myButton');
btn.attachEvent('onclick', function() {
  alert('Hello, world!');
});

而在Firefox浏览器中，需要使用addEventListener方法来绑定事件，如下所示：

var btn = document.getElementById('myButton');
btn.addEventListener('click', function() {
  alert('Hello, world!');
}, false);

为了让代码能够在两种浏览器中都正确执行，我们可以使用以下兼容写法：

var btn = document.getElementById('myButton');
if (btn.attachEvent) {
  btn.attachEvent('onclick', function() {
    alert('Hello, world!');
  });
} else if (btn.addEventListener) {
  btn.addEventListener('click', function() {
    alert('Hello, world!');
  }, false);
}

这样，代码就可以在IE和Firefox下都正确工作了。

实例2：获取样式值

在IE中，可以使用currentStyle属性获取DOM元素的样式值，如下所示：

var div = document.getElementById('myDiv');
var width = div.currentStyle.width;

而在Firefox中，则需要使用getComputedStyle方法来获取样式值，如下所示：

var div = document.getElementById('myDiv');
var width = window.getComputedStyle(div, null).getPropertyValue('width');

因此，我们可以使用以下兼容写法：

var div = document.getElementById('myDiv');
var width = div.currentStyle ? div.currentStyle.width : window.getComputedStyle(div, null).getPropertyValue('width');

这样，代码就可以在IE和Firefox下都正确工作了。

结语

对于Javascript的兼容性问题，需要我们严格按照浏览器的标准来编写代码，并且时刻清楚各个浏览器之间的差异。通过上述示例及兼容写法，相信大家能够更好地掌握在IE和Firefox下Javascript的兼容策略。