css.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. const PIXEL_PATTERN = /margin|padding|width|height|max|min|offset/;
  2. const removePixel = {
  3. left: true,
  4. top: true
  5. };
  6. const floatMap = {
  7. cssFloat: 1,
  8. styleFloat: 1,
  9. float: 1
  10. };
  11. function getComputedStyle(node) {
  12. return node.nodeType === 1 ? node.ownerDocument.defaultView.getComputedStyle(node, null) : {};
  13. }
  14. function getStyleValue(node, type, value) {
  15. type = type.toLowerCase();
  16. if (value === 'auto') {
  17. if (type === 'height') {
  18. return node.offsetHeight;
  19. }
  20. if (type === 'width') {
  21. return node.offsetWidth;
  22. }
  23. }
  24. if (!(type in removePixel)) {
  25. removePixel[type] = PIXEL_PATTERN.test(type);
  26. }
  27. return removePixel[type] ? parseFloat(value) || 0 : value;
  28. }
  29. export function get(node, name) {
  30. const length = arguments.length;
  31. const style = getComputedStyle(node);
  32. name = floatMap[name] ? 'cssFloat' in node.style ? 'cssFloat' : 'styleFloat' : name;
  33. return length === 1 ? style : getStyleValue(node, name, style[name] || node.style[name]);
  34. }
  35. export function set(node, name, value) {
  36. const length = arguments.length;
  37. name = floatMap[name] ? 'cssFloat' in node.style ? 'cssFloat' : 'styleFloat' : name;
  38. if (length === 3) {
  39. if (typeof value === 'number' && PIXEL_PATTERN.test(name)) {
  40. value = `${value}px`;
  41. }
  42. node.style[name] = value; // Number
  43. return value;
  44. }
  45. for (const x in name) {
  46. if (name.hasOwnProperty(x)) {
  47. set(node, x, name[x]);
  48. }
  49. }
  50. return getComputedStyle(node);
  51. }
  52. export function getOuterWidth(el) {
  53. if (el === document.body) {
  54. return document.documentElement.clientWidth;
  55. }
  56. return el.offsetWidth;
  57. }
  58. export function getOuterHeight(el) {
  59. if (el === document.body) {
  60. return window.innerHeight || document.documentElement.clientHeight;
  61. }
  62. return el.offsetHeight;
  63. }
  64. export function getDocSize() {
  65. const width = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
  66. const height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
  67. return {
  68. width,
  69. height
  70. };
  71. }
  72. export function getClientSize() {
  73. const width = document.documentElement.clientWidth;
  74. const height = window.innerHeight || document.documentElement.clientHeight;
  75. return {
  76. width,
  77. height
  78. };
  79. }
  80. export function getScroll() {
  81. return {
  82. scrollLeft: Math.max(document.documentElement.scrollLeft, document.body.scrollLeft),
  83. scrollTop: Math.max(document.documentElement.scrollTop, document.body.scrollTop)
  84. };
  85. }
  86. export function getOffset(node) {
  87. const box = node.getBoundingClientRect();
  88. const docElem = document.documentElement;
  89. return {
  90. left: box.left + (window.scrollX || docElem.scrollLeft) - (docElem.clientLeft || document.body.clientLeft || 0),
  91. top: box.top + (window.scrollY || docElem.scrollTop) - (docElem.clientTop || document.body.clientTop || 0)
  92. };
  93. }
  94. export function styleToString(style) {
  95. // There are some different behavior between Firefox & Chrome.
  96. // We have to handle this ourself.
  97. const styleNames = Array.prototype.slice.apply(style);
  98. return styleNames.map(name => `${name}: ${style.getPropertyValue(name)};`).join('');
  99. }
  100. export function styleObjectToString(style) {
  101. return Object.keys(style).reduce((acc, name) => {
  102. const styleValue = style[name];
  103. if (typeof styleValue === 'undefined' || styleValue === null) {
  104. return acc;
  105. }
  106. acc += `${name}: ${style[name]};`;
  107. return acc;
  108. }, '');
  109. }