用三元运算符的左侧赋值无效。

Question

我想要创建一个像这样的样式表：

var sheet = document.createElement('style'); sheet.type = 'text/css';
sheet.innerHTML = data.style;

但是看起来IE需要自己的语法。为了简化这个答案的代码，我尝试了以下操作：

var sheet = document.createElement('style'); sheet.type = 'text/css';
(sheet.styleSheet ? sheet.styleSheet.cssText : sheet.innerHTML) = data.style;

但是这会抛出ReferenceError: invalid assignment left-hand side错误。

那么，我必须使用...

var sheet = document.createElement('style'); sheet.type = 'text/css';
if(sheet.styleSheet) sheet.styleSheet.cssText = data.style;
else sheet.innerHTML = data.style;

是否有更简单的替代方案？

- Oriol

---

我相信你可以设置这两个值，而且Javascript的对象系统足够强大，可以处理它们之间的差异。 - abiessu

@abiessu 但是如果 sheet.styleSheet 是 undefined，那么 sheet.styleSheet.cssText = sheet.innerHTML = data.style 就会抛出 TypeError: sheet.styleSheet is undefined。那么，我还应该检查是否需要创建对象 sheet.styleSheet。 - Oriol

不，我的意思是使用两个单独的赋值行。这种类型错误很可能是因为在你的示例中sheet.stylesheet不存在，无法提供一个可访问sheet.styleSheet.cssText的值。 - abiessu

@abiessu 嗯，这是一样的。 - Oriol

只需编写一个方便的函数来设置它，然后忘记它即可。 - Dave

在广义上，使用两个明确的“if”语句来处理样式表不太可能引起显着的性能问题或维护方面的混淆。我不知道任何其他简单的替代方案。 - abiessu

Answer 1

您总是可以做以下操作：

sheet.styleSheet ? sheet.styleSheet.cssText = data.style 
                 : sheet.appendChild(document.createTextNode(data.style));

FIDDLE

- adeneo

---

@Dave - 但它确实回答了问题！ - adeneo

好的，我想避免重复使用 data.style，但我想这是最简化的可工作代码。 - Oriol

@Oriol 我发布的代码避免了重复使用 data.style（这是设置函数的唯一优点。好吧，还有未来的可维护性）。这个答案更易读，因为增加了一个换行符，但就我个人而言，我仍然强烈建议使用更易读的代码。正如我在另一个评论中所说，如果你想让它变小，请使用编译器。它将为您的发布版本进行此类优化，同时保持原始代码易于维护。 - Dave

Answer 2

这是一个解决方案，不会让未来的维护人员想不明白代码到底在做什么：

function setSheetContent( sheet, text ) {
    if(sheet.styleSheet)
        sheet.styleSheet.cssText = text;
    else
        sheet.innerHTML = text;
}

var sheet = document.createElement('style');
sheet.type = 'text/css';
setSheetContent( sheet, data.style );

或者将其包装起来，以获得更多的便利（如果您从不想更改现有表格的内容）。

function stylesheetWithContent( sheet, text ) {
    var sheet = document.createElement('style');
    sheet.type = 'text/css';
    if(sheet.styleSheet)
        sheet.styleSheet.cssText = text;
    else
        sheet.innerHTML = text;
    return sheet;
}

var sheet = stylesheetWithContent( data.style );

- Dave

---

同时不要将大量语句放在一行上。如果您想要缩小代码以加快下载速度，请使用实际的缩小器（例如，Google Closure Compiler有一个在线版本）。 - Dave

我只是在同一行上使用了 var sheet = document.createElement('style'); sheet.type = 'text/css';，因为当我编写 HTML 时，我也会在同一行上使用 <style type="text/css">。 - Oriol

@Oriol 这还是有点奇怪。通常的约定是每行一个逻辑语句。在这种情况下，第一行创建元素，第二行设置其类型属性。HTML 不是一种编程语言，所以它的规则与其他语言不同。我发现遵循惯例比试图反对它更好；你不想花更多时间思考样式而不是内容。 - Dave