0

I want to convert my node style attribute value to a js object which contains all the CSS properties and its values.

Style attribute value

background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLEhYLDhAVDhkVDhEQFhUYFxMZGBYVFhUdKysjHR0oHR0WJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHDsoIh0vLy87Ozs7Oy87LzsvLy8vNS8vLy8vLzUvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABAAGAMBIgACEQEDEQH/xAAZAAACAwEAAAAAAAAAAAAAAAADBQEEBwD/xAAeEAABBAIDAQAAAAAAAAAAAAAAAQIDIQQSExQxEf/EABYBAQEBAAAAAAAAAAAAAAAAAAMEAv/EABoRAAICAwAAAAAAAAAAAAAAAAECACEDETH/2gAMAwEAAhEDEQA/ANTbnMkpAvZaxLE2DGv30uzsXQlU7E0UyrTdhJc1rqOFnGuxIqioZGaf/9k=);background-color:#00cc7e;background-size:cover;opacity:1;transition:opacity 500ms 500ms;position:absolute;left:0;top:0;width:100%;height:100%

Convert it to JS Object

{
      backgroundImage: url(data;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLEhYLDhAVDhkVDhEQFhUYFxMZGBYVFhUdKysjHR0oHR0WJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHDsoIh0vLy87Ozs7Oy87LzsvLy8vNS8vLy8vLzUvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABAAGAMBIgACEQEDEQH/xAAZAAACAwEAAAAAAAAAAAAAAAADBQEEBwD/xAAeEAABBAIDAQAAAAAAAAAAAAAAAQIDIQQSExQxEf/EABYBAQEBAAAAAAAAAAAAAAAAAAMEAv/EABoRAAICAwAAAAAAAAAAAAAAAAECACEDETH/2gAMAwEAAhEDEQA/ANTbnMkpAvZaxLE2DGv30uzsXQlU7E0UyrTdhJc1rqOFnGuxIqioZGaf/9k=): undefined;
      backgroundColor: #00cc7e;
      backgroundSize: cover;
      opacity: 1;
      transition: opacity 500ms 500ms;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%
}

Any helpful answer will be appreciated.

Improve this question
6
  • what is the problem ? Commented Jun 22, 2021 at 4:38
  • @brk i am trying to split style attribute value by ; but it will split background image value also. Commented Jun 22, 2021 at 4:39
  • how are you getting style attribute value? reading from html ? Commented Jun 22, 2021 at 4:42
  • @brk yes, i am reading it from html Commented Jun 22, 2021 at 4:43
  • Try this, it might help stackoverflow.com/questions/9518956/… Commented Jun 22, 2021 at 4:46

4 Answers 4

Reset to default
2

You can try methods of CSSStyleDeclaration.

Here getStyles is of type CSSStyleDeclaration which will give list of inline style properties.

const getStyles = document.getElementById('img').style;
const properties = Array.from(getStyles).reduce((acc, curr) => {
  acc[curr] = getStyles.getPropertyValue(curr)
  return acc;
}, {})
console.log(properties)
<img id='img' style="background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLEhYLDhAVDhkVDhEQFhUYFxMZGBYVFhUdKysjHR0oHR0WJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHDsoIh0vLy87Ozs7Oy87LzsvLy8vNS8vLy8vLzUvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABAAGAMBIgACEQEDEQH/xAAZAAACAwEAAAAAAAAAAAAAAAADBQEEBwD/xAAeEAABBAIDAQAAAAAAAAAAAAAAAQIDIQQSExQxEf/EABYBAQEBAAAAAAAAAAAAAAAAAAMEAv/EABoRAAICAwAAAAAAAAAAAAAAAAECACEDETH/2gAMAwEAAhEDEQA/ANTbnMkpAvZaxLE2DGv30uzsXQlU7E0UyrTdhJc1rqOFnGuxIqioZGaf/9k=);background-color:#00cc7e;background-size:cover;opacity:1;transition:opacity 500ms 500ms;position:absolute;left:0;top:0;width:100%;height:100%">

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Well you can definitely do that by:

let element = document.querySelector("your-selector-here")
console.log(element.style)

But let me warn you that you'll get a very big object of css properties because your element has more css properties than what you define in you style-sheet.

Improve this answer

1 Comment

I want to warn any potential bypasser that element.style is a live property; this means that if you store this value and update the style in the DOM, the variable which you thought held the old style has been updated to reflect the new style. @brk's answer solves this issue by setting the style in a separate object.
0

Why you wanna do so ?

If its style of an element you can grab it by first selecting the element in your js and then getting style using element.style ,you can slect element by various methods such as by its ID, class etc. Tho this will give you all the element's style including the default one's.

console.log(document.querySelector('#test').style)
<div id="test"></div>

This shall be used in worst case scenario until you can filter the default one's.

If you have the style as a sting with you, and you want to convert it to object, you can use JSON.parse ,but before that you will have to convert you styles into object format, replace ';' with ',' and convert each individual key and value to string. This might not be easy.

const test = 'background-color:#00cc7e;background-size:cover;opacity:1;transition:opacity 500ms 500ms;position:absolute;left:0;top:0;width:100%;height:100%';

var afterReplace = test.replaceAll(";", '","').replaceAll(":", '":"');

objectForm = JSON.parse('{"' + afterReplace + '"}')

console.log(objectForm)

Here add string value of the style in test from which we replace all ';' to '";"' and ':' to '":"' then we add {" and "} to both start and end, and finally parse it into a json object. Though I would suggest you not to use it.

Improve this answer

Comments

-1

This answer is incorrect but I thought it was important to leave here. While it works fine in Chrome, it doesn't work in Firefox, where the CSS2Properties object they return don't have enumerable property.

This method goes through the computed style of the element, so it has some browser-specific values. element.style has all possible style attributes, so this filters out the empty ones and returns the balance as a javascript notation style object

let element = document.querySelector('#element');
let styleobj = Object.fromEntries(Object
                .entries(element.style)
                .filter(e => isNaN(e[0]) && e[1].trim())
               )


let element = document.querySelector('#element');
let styleobj = Object.fromEntries(Object.entries(element.style).filter(e => isNaN(e[0]) && e[1].trim()))
console.log(styleobj)
<div id='element' style='background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLEhYLDhAVDhkVDhEQFhUYFxMZGBYVFhUdKysjHR0oHR0WJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OHBAQHDsoIh0vLy87Ozs7Oy87LzsvLy8vNS8vLy8vLzUvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABAAGAMBIgACEQEDEQH/xAAZAAACAwEAAAAAAAAAAAAAAAADBQEEBwD/xAAeEAABBAIDAQAAAAAAAAAAAAAAAQIDIQQSExQxEf/EABYBAQEBAAAAAAAAAAAAAAAAAAMEAv/EABoRAAICAwAAAAAAAAAAAAAAAAECACEDETH/2gAMAwEAAhEDEQA/ANTbnMkpAvZaxLE2DGv30uzsXQlU7E0UyrTdhJc1rqOFnGuxIqioZGaf/9k=);background-color:#00cc7e;background-size:cover;opacity:1;transition:opacity 500ms 500ms;position:absolute;left:0;top:0;width:100%;height:100%'></div>

Improve this answer

6 Comments

Lets see. I answered first and got the same result as @brk, except that I actually am delivering what the OP requested, a javascript style object (ie backgroundColor vs background-color). Yet I get a downvote and @brk gets an upvote (which they deserve). I just don't get SO sometimes
Didn't downvote, that's the way SO goes sometimes. Your solution is a little hard to read/human parse as it is. Perhaps break out some of the nesting and add some comments to explain what it is doing. Then add the one-line version of it at the end.
Thx @JonP - good points. It's funny how those downvotes come at lightning speed sometimes, half seconds after posting. Amazing actually :)
Won't work in Firefox, where the CSS2Properties object they return doesn't have any enumerable property.
@Kaiido - wow! thank you so much for the explanation. I didn't even think to check browser implementation on something so rudimentary as element.style. I appreciate your feedback.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.