css.js 3.7 KB

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