css.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. /* eslint-disable no-nested-ternary */
  2. var PIXEL_PATTERN = /margin|padding|width|height|max|min|offset/;
  3. var removePixel = {
  4. left: true,
  5. top: true
  6. };
  7. var floatMap = {
  8. cssFloat: 1,
  9. styleFloat: 1,
  10. float: 1
  11. };
  12. function getComputedStyle(node) {
  13. return node.nodeType === 1 ? node.ownerDocument.defaultView.getComputedStyle(node, null) : {};
  14. }
  15. function getStyleValue(node, type, value) {
  16. type = type.toLowerCase();
  17. if (value === 'auto') {
  18. if (type === 'height') {
  19. return node.offsetHeight;
  20. }
  21. if (type === 'width') {
  22. return node.offsetWidth;
  23. }
  24. }
  25. if (!(type in removePixel)) {
  26. removePixel[type] = PIXEL_PATTERN.test(type);
  27. }
  28. return removePixel[type] ? parseFloat(value) || 0 : value;
  29. }
  30. export function get(node, name) {
  31. var length = arguments.length;
  32. var style = getComputedStyle(node);
  33. name = floatMap[name] ? 'cssFloat' in node.style ? 'cssFloat' : 'styleFloat' : name;
  34. return length === 1 ? style : getStyleValue(node, name, style[name] || node.style[name]);
  35. }
  36. export function set(node, name, value) {
  37. var length = arguments.length;
  38. name = floatMap[name] ? 'cssFloat' in node.style ? 'cssFloat' : 'styleFloat' : name;
  39. if (length === 3) {
  40. if (typeof value === 'number' && PIXEL_PATTERN.test(name)) {
  41. value = "".concat(value, "px");
  42. }
  43. node.style[name] = value; // Number
  44. return value;
  45. }
  46. for (var x in name) {
  47. if (name.hasOwnProperty(x)) {
  48. set(node, x, name[x]);
  49. }
  50. }
  51. return getComputedStyle(node);
  52. }
  53. export function getOuterWidth(el) {
  54. if (el === document.body) {
  55. return document.documentElement.clientWidth;
  56. }
  57. return el.offsetWidth;
  58. }
  59. export function getOuterHeight(el) {
  60. if (el === document.body) {
  61. return window.innerHeight || document.documentElement.clientHeight;
  62. }
  63. return el.offsetHeight;
  64. }
  65. export function getDocSize() {
  66. var width = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
  67. var height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
  68. return {
  69. width: width,
  70. height: height
  71. };
  72. }
  73. export function getClientSize() {
  74. var width = document.documentElement.clientWidth;
  75. var height = window.innerHeight || document.documentElement.clientHeight;
  76. return {
  77. width: width,
  78. height: height
  79. };
  80. }
  81. export function getScroll() {
  82. return {
  83. scrollLeft: Math.max(document.documentElement.scrollLeft, document.body.scrollLeft),
  84. scrollTop: Math.max(document.documentElement.scrollTop, document.body.scrollTop)
  85. };
  86. }
  87. export function getOffset(node) {
  88. var box = node.getBoundingClientRect();
  89. var docElem = document.documentElement;
  90. // < ie8 不支持 win.pageXOffset, 则使用 docElem.scrollLeft
  91. return {
  92. left: box.left + (window.pageXOffset || docElem.scrollLeft) - (docElem.clientLeft || document.body.clientLeft || 0),
  93. top: box.top + (window.pageYOffset || docElem.scrollTop) - (docElem.clientTop || document.body.clientTop || 0)
  94. };
  95. }