jquery - 向内联元素添加无法识别的样式

Question

我有一些 JavaScript 代码可以将元素上的所有样式转换为内联样式。这样做的原因是可以将代码导出为电子邮件，并希望在通过电子邮件发送时不会中断。

虽然代码保留在页面上，但我也在尝试添加一些额外的电子邮件特定样式，即mso-line-height-rule: exactly; 因为我遇到的问题。

但是，如果我使用.css('mso-line-height-rule', 'exactly')它设置它就不会这样做。我只能假设这是因为浏览器无法将其识别为有效的 CSS 样式。有任何想法吗？

小提琴和示例代码：

<article>
    <div></div>
</article>

JS

$('div').css({
    // Works
    'background-color': 'red',

    // Doesn't work
    'mso-inline-height': 'exactly'
});

alert($('article').html());

Answer 1

使用属性attr()选择器而不是 css 将解决您的直接问题。

$("div").attr("style", "background-color: red; mso-inline-height: exactly");

Answer 2

尝试这个：

 $('div').css({
// Works
'background-color': 'red',

// Doesn't work
'mso-inline-height': 'exactly'
});
//Grab any styles that were set with the css method
var style = $('div').attr('style');
//Append the non-standard MS Word bunk
$('div').attr('style', style + 'mso-inline-height:exactly;');
alert($('article').html());

http://jsfiddle.net/HDQpW/1/

它带来了大锤，但它应该可以解决问题。