get the CSS maxWidth value of the parent javascript

» javascript » get the CSS maxWidth value of the parent javascript

By : user3099450

Date : January 11 2021, 03:32 PM

To fix this issue You were on the right track - so, your first approach does not work in this case because the element doesn't have max-width directly inside its style declaration (see sample below with .other for when this would work).
The second approach is correct, but you mixed up access argument a little - if you use .getPropertyValue, you use CSS-style "max-width", and if you don't, you use .maxWidth like with .style:

code :

var childDIV=document.querySelector('.child');

var result= document.querySelector('.other').style.maxWidth;
console.log(`Approach 1: ${result}`);

var compStyle = window.getComputedStyle(childDIV.parentNode,null);

result = compStyle.maxWidth;
console.log(`Approach 2: ${result}`);

result = compStyle.getPropertyValue("max-width");
console.log(`Approach 3: ${result}`);

.parent{max-width:100px}

<div class="parent"><div class="child"></div></div>

<div class="other" style="max-width:50px"></div>

Share :

Javascript: emulating maxWidth and maxHeight for images in IE

By : msenkaya

Date : March 29 2020, 07:55 AM

I hope this helps . You can emulate maxWidth and maxHeight in IE6 using CSS expressions - example here http://www.cameronmoll.com/archives/000892.html. Make sure you conditionally apply these rules to target only IE6 and keep in mind that CSS expressions have some big performance issues.

Get height and width after setting maxHeight and maxWidth and auto - pure javascript

By : Vadim Pilipenko

Date : March 29 2020, 07:55 AM

This might help you offsetHeight and offsetWidth will get you what you want, and take into account the maxWidth and maxHeight. Do keep in mind that the img object needs to be part of the DOM to have any dimensions at all. So you'll need to add it with something like document.body.appendChild($new_image) before offsetHeight and width will return anything useful.

Detecting image width via JavaScript when maxWidth is used

By : Шкатов Дмитрий

Date : March 29 2020, 07:55 AM

this one helps. For me: in IE9, Opera, Safari(PC), FF and chrome the naturalWidth/naturalHeight-properties return the desired values
http://jsfiddle.net/MSjnM/5/

JavaScript: Convert array of objects with parent keys to parent / child tree (including objects with no parent)

By : user1872446

Date : March 29 2020, 07:55 AM

Hope that helps Looks like you want to add a children key with an array of values to the objects in your initial array where the id value corresponds to one or more parentCategoryId values from other objects in the array - and no object should be repeated as a parent or child in the array of nested objects.
You could map the array to append children, and then filter to return just the root parents (and orphans). For example (working snippet below the example if you want to see the output):

code :

const ids = table.map(x => x.id);

let result = table.map((parent) => {
  let children = table.filter((child) => {
    if (child.id !== child.parentCategoryId && child.parentCategoryId === parent.id) {
      return child;
    }
  });
  if (children.length) {
    parent.children = children;
  }
  return parent;
}).filter((obj) => {
  if (obj.id === obj.parentCategoryId || !ids.includes(obj.parentCategoryId)) {
    // include ultimate parents and orphans at root
    return obj;
  }
});

const table = [{
    "id": 791,
    "sortOrder": 0,
    "parentCategoryId": 833
  },
  {
    "id": 790,
    "sortOrder": 0,
    "parentCategoryId": 833
  },
  {
    "id": 845,
    "sortOrder": 0,
    "parentCategoryId": 847
  },
  {
    "id": 844,
    "sortOrder": 0,
    "parentCategoryId": 842
  },
  {
    "id": 802,
    "sortOrder": 0,
    "parentCategoryId": 847
  },
  {
    "id": 788,
    "sortOrder": 0,
    "parentCategoryId": 833
  },
  {
    "id": 863,
    "sortOrder": 0,
    "parentCategoryId": 863
  },
  {
    "id": 858,
    "sortOrder": 0,
    "parentCategoryId": 858
  },
  {
    "id": 867,
    "sortOrder": 0,
    "parentCategoryId": 867
  },
  {
    "id": 871,
    "sortOrder": 0,
    "parentCategoryId": 867
  },
  {
    "id": 801,
    "name": "Tickets",
    "sortOrder": 0,
    "parentCategoryId": 847
  },
  {
    "id": 792,
    "sortOrder": 0,
    "parentCategoryId": 833
  },
  {
    "id": 797,
    "sortOrder": 0,
    "parentCategoryId": 847
  },
  {
    "id": 789,
    "name": "Hot food",
    "sortOrder": 0,
    "parentCategoryId": 833
  },
  {
    "id": 798,
    "sortOrder": 0,
    "parentCategoryId": 847
  },
  {
    "id": 671,
    "sortOrder": 0,
    "parentCategoryId": 847
  },
  {
    "id": 833,
    "sortOrder": 0,
    "parentCategoryId": 833
  },
  {
    "id": 796,
    "sortOrder": 0,
    "parentCategoryId": 847
  },
  {
    "id": 843,
    "sortOrder": 0,
    "parentCategoryId": 842
  },
  {
    "id": 840,
    "sortOrder": 0,
    "parentCategoryId": 793
  },
  {
    "id": 868,
    "sortOrder": 0,
    "parentCategoryId": 868
  },
  {
    "id": 851,
    "sortOrder": 0,
    "parentCategoryId": 851
  },
  {
    "id": 839,
    "sortOrder": 0,
    "parentCategoryId": 847
  },
  {
    "id": 793,
    "sortOrder": 0,
    "parentCategoryId": 839
  },
  {
    "id": 859,
    "sortOrder": 0,
    "parentCategoryId": 859
  },
  {
    "id": 805,
    "sortOrder": 0,
    "parentCategoryId": 859
  },
  {
    "id": 856,
    "name": "DRINKS",
    "sortOrder": 0,
    "parentCategoryId": 805
  },
  {
    "id": 870,
    "sortOrder": 0,
    "parentCategoryId": 856
  },
  {
    "id": 787,
    "sortOrder": 0,
    "parentCategoryId": 833
  },
  {
    "id": 786,
    "sortOrder": 0,
    "parentCategoryId": 833
  },
  {
    "id": 799,
    "sortOrder": 0,
    "parentCategoryId": 847
  },
  {
    "id": 852,
    "sortOrder": 0,
    "parentCategoryId": 852
  },
  {
    "id": 795,
    "name": "Gents fragrance",
    "sortOrder": 0,
    "parentCategoryId": 847
  },
  {
    "id": 864,
    "sortOrder": 0,
    "parentCategoryId": 864
  },
  {
    "id": 854,
    "sortOrder": 0,
    "parentCategoryId": 854
  },
  {
    "id": 865,
    "sortOrder": 0,
    "parentCategoryId": 865
  },
  {
    "id": 869,
    "name": "GFI",
    "sortOrder": 0,
    "parentCategoryId": 869
  },
  {
    "id": 785,
    "sortOrder": 0,
    "parentCategoryId": 833
  }
];

const ids = table.map(x => x.id);

let result = table.map((parent) => {
  let children = table.filter((child) => {
    if (child.id !== child.parentCategoryId && child.parentCategoryId === parent.id) {
      return child;
    }
  });
  if (children.length) {
    parent.children = children;
  }
  return parent;
}).filter((obj) => {
  if (obj.id === obj.parentCategoryId || !ids.includes(obj.parentCategoryId)) {
    // include ultimate parents and orphans at root
    return obj;
  }
});

// stringify just to flatten out SO console result for easier result scanning
console.log(JSON.stringify(result));