javascript - 三元 if 的左侧赋值无效

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;

...还是有更简单的选择？

Answer 1

你总是可以这样做：

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

小提琴

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 );