Question

说，我想看看DOM元素是否是一个块。我可以用三种方式写出来，这取决于我的心情：

// first way
if (el.currentStyle.display == "block" || el.currentStyle.display == "inline-block" || el.currentStyle.display == "table-cell")       

// second way
var blocks = {"block": 1, "inline-block": 1, "table-cell": 1};
if (el.currentStyle.display in blocks)// 

// third way
if (el.currentStyle.display.match(/block|inline-block|table-cell/))

我对所有这些感觉好坏参半。一旦我有多个选项，首先是太冗长了。第二个包含对象中的任意值（这次我放置1个）。第三看起来像矫枉过正。（过度杀戮到底有什么不好？）

你知道另一个更好的方法吗？如果不是，我对这三种方式缺少任何缺点？

仅限Javascript。

Answer 1

我喜欢第三种方式;我认为它根本不像是矫枉过正。如果您需要更短的方式，那么这也适用：

el.currentStyle.display.match(/(e-)?(block|cell)/)

但那不是很可读......

通过扩展String原型可能值得将它全部抽象出来：

String.prototype.matches = function(what) {
    return (',' + what + ',').indexOf(',' + this + ',') > -1;
};

// Using it:
el.currentStyle.display.matches('block,inline-block,table-cell');

Answer 2

如果我们主要是为了可读性，并且如果这种情况不止一次发生 - 也许即使只是一次 - 我会将测试移到一个函数中。然后以你喜欢的方式定义该函数 - 可能是选项1，为了最简单。

过度破坏？有可能。但是给那些想要在6个月后扫描并理解代码的程序员提供的礼物。可能你： - ）

function isBlock(el) {
  return (el.currentStyle.display == "block" || 
          el.currentStyle.display == "inline-block" || 
          el.currentStyle.display == "table-cell");
}


// ...

if (isBlock(el)) {
  // do something
}

Answer 3

你不能使用第二种方式，但检查它是否未定义，然后跳过“: 1”部分。我没有测试过。

Answer 4

看起来你需要一个inArray函数，这里有一个来自顶部搜索结果：

Array.prototype.inArray = function (value) {
  var i;
  for (i=0; i < this.length; i++) {
    if (this[i] === value) {
      return true;
    }
  }
  return false;
};

然后第四种方式看起来像这样：

if (['block','inline-block','table-cell'].inArray(el.currentStyle.display))

或者以更易读的方式：

var isBlock = ['block','inline-block','table-cell'].inArray(el.currentStyle.display);

Answer 5

我首选的解决方案是：

'block||inline-block||table-cell'.indexOf( el.currentStyle.display ) >= 0

我认为这将使用字符串的本机代码，并且比数组更有效;迭代方法。

查找预定义的一组文本选项

5 个答案: