地址

https://github.com/liulinboyi/css2InlineCss

代码

  1. "use strict";
  2. /**
  3.  * 模式
  4.  */
  5. var MODE = {
  6.     PART: 'part',
  7.     ALL: 'all', // 全部设置
  8. };
  9. /**
  10.  * getComputedStyle的返回值是 resolved values,
  11.  * 通常跟CSS2.1中的computed values是相同的值。
  12.  * 但对于一些旧的属性，比如width, height, padding
  13.  * 它们的值又为 used values。 最初, CSS2.0定义的计
  14.  * 算值Computed values 就是属性的最终值。 但是CSS2.1
  15.  * 重新定义了 computed values 为布局前的值， used values
  16.  * 布局后的值。 布局前与布局后的区别是， width 或者 height的
  17.  * 百分比可以代表元素的宽度，在布局后会被像素值替换.
  18.  */
  19. function css2InlineCss(el /* DMO元素 | clsss | id */, normal /* 自定义常见样式 */, mode /* 设置类型 */) {
  20.     if (mode === void 0) { mode = MODE.PART; }
  21.     /** 常见样式 */
  22.     var normalStyle = normal ? normal : [
  23.         'color',
  24.         'background',
  25.         'margin',
  26.         'padding',
  27.         'text-align',
  28.         'display',
  29.         'font-size',
  30.         'font-weight',
  31.         'line-height',
  32.         'white-space',
  33.         'border',
  34.         'border-radius',
  35.         'text-decoration',
  36.         'box-sizing',
  37.         'cursor',
  38.         'word-wrap',
  39.         'font-family',
  40.         'opacity',
  41.     ];
  42.     // 将normalStyle暴露出去
  43.     css2InlineCss.normalStyle = normalStyle;
  44.     // 获取dom元素
  45.     var div = typeof el === 'string' ? document.querySelector(el) : el;
  46.     // 获取getComputedStyle方法
  47.     var getComputedStyle = (document.defaultView && document.defaultView.getComputedStyle) || window.getComputedStyle;
  48.     // 执行getComputedStyle，获取所有style
  49.     var styles = getComputedStyle(div, null);
  50.     for (var key in styles /* 遍历styles，进行下一步操作 */) {
  51.         if (mode === MODE.ALL /* 如果mode是all，则全部设置 */) {
  52.             // 添加到行内样式中
  53.             div.style[key] = styles[key];
  54.             return;
  55.         }
  56.         // mode是part，则匹配部分设置
  57.         if (styles[key] && // 值存在
  58.             // styles[key] !== '0px' &&
  59.             styles[key] !== 'none' && // 值存在不为'none'
  60.             // styles[key] !== 'normal' &&
  61.             // styles[key] !== 'auto' &&
  62.             normalStyle.indexOf(key) > -1 // 值在map里面
  63.         ) {
  64.             // 添加到行内样式中
  65.             div.style[key] = styles[key];
  66.         }
  67.     }
  68. }

思路

Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle

遍历样式集，选择其中常用的样式，添加到当前元素的行内样式内。

主要解决

  • HTML电子邮件
  • 在第三方网站中嵌入HTML