Using Object.assign() to quickly set multiple inline styles

Since an HTMLElement its CSSStyleDeclaration (viz. its style property) essentially is an Object, it’s perfectly possible to pass it as the target object into Object.assign() along with a few other objects.

The result is that all keys from those extra objects will be merged as CSS properties along with their values on the currently applied styles. A lot faster than applying them one-by-one (*).

const $demo = document.querySelector('#demo');

Object.assign(demo.style, {
    display: 'inline-block',
    padding: '0.2em 0.4em',
    borderRadius: '0.4em',
    color: 'white',
    fontWeight: 700,
    background: 'rebeccapurple',
});

Here’s a demo pen:

(*) I know, a better approach would be to assign just one extra className onto an HTMLElement in order to apply a set of CSS rules onto it. I’m merely pointing out here that it’s possible to do this kind of thing.

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

How to find the original Flickr Photo URL and User from a Static Flickr Image URL/Permalink

flickr.jpgGot a link like //farm3.static.flickr.com/2085/2177060015_258bcfaff9_m.jpg and want to find out which user posted it, more images by that user, see the full-size version, etc? Seek no longer, the answer is very simple!

Continue reading “How to find the original Flickr Photo URL and User from a Static Flickr Image URL/Permalink”