Question

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

虽然代码保存在页面上，但我还尝试添加一些其他特定于电子邮件的样式，即mso-line-height-rule: exactly; because of a problem I'm having。

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

Fiddle和示例代码：

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

JS

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

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

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

Answer 1

试试这个：

 $('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/

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

Answer 2

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

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

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

2 个答案: