Is there a way to distinguish the HTML Elements from the CSS elements and retrieve them individually?

Question

Is there a way to distinguish the HTML Elements from the CSS elements and retrieve them individually?

I am working on achieving a specific task and this JS fiddle represents one part of it.

alert($("#content")[0].outerHTML);

When executed, this code returns the following DOM structure:

 <div id="content">
     <div id="example1" style="width:100px height:100px background-color:red"></div>
     <div id="example2" style="width:50px height:50px background-color:blue"></div>
     <div id="example3" style="width:25px height:25px background-color:yellow"></div>
 </div>

My goal is to dynamically add div elements with inline CSS. I aim to retrieve both the div elements and their CSS attributes separately as text elements in the end.

javascript jquery html css

Answer 1

Answer №1

To efficiently manage your style attributes, consider removing them and storing them in an id-style mapping for later use. Here's a sample approach:

var styleMap = {};

$("#container").children().each(function() {
    styleMap[this.id] = $(this).attr('style');
    $(this).removeAttr('style');
});

// Verification
alert(
    'HTML:\n\n' + 
    $("#container")[0].outerHTML + 
    '\n\nCSS:\n\n' + 
    JSON.stringify(styleMap, null, 4)
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div id="sample1" style="width:100px height:100px background-color:red"></div>
    <div id="sample2" style="width:50px height:50px background-color:blue"></div>
    <div id="sample3" style="width:25px height:25px background-color:yellow"></div>
</div>

Answer 2

To efficiently manage your style attributes, consider removing them and storing them in an id-style mapping for later use. Here's a sample approach:

var styleMap = {};

$("#container").children().each(function() {
    styleMap[this.id] = $(this).attr('style');
    $(this).removeAttr('style');
});

// Verification
alert(
    'HTML:\n\n' + 
    $("#container")[0].outerHTML + 
    '\n\nCSS:\n\n' + 
    JSON.stringify(styleMap, null, 4)
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div id="sample1" style="width:100px height:100px background-color:red"></div>
    <div id="sample2" style="width:50px height:50px background-color:blue"></div>
    <div id="sample3" style="width:25px height:25px background-color:yellow"></div>
</div>

Is there a way to distinguish the HTML Elements from the CSS elements and retrieve them individually?

Answer №1

Similar questions

Extremely efficient CSS utility classes for supreme performance

Once a WordPress user includes a php file

Unable to determine the appropriate signature for calling the date function

When the button is clicked, bind the value to an object using the specified key in

Automatically advance to the next input field and go back when the backspace key is pressed after reaching the maximum length

Bulma: Tips for creating equally sized buttons?

How can I create an onclick link within an alert message using JavaScript, even when the alert is not consistently displayed?

What is the best way to display the panel during a postback?

Using Ajax and PHP to Trigger a Forced Download

Restrict a class to contain only functions that have a defined signature

Verify if any choices are available before displaying the div block

Passing Events in JavaScript Explained

Div displaying with extra space below

Identifying button clicks using selenium-wire in Python

What is the method for applying a prefix to component tags in Vue.js?

What's the best way to display the mysqli_error message when making an AJAX call with jQuery?

Display a div using jQuery when it reaches halfway the height of another div

The error message from the Three.js program states: "Attempting to access property '0' of an undefined value is not possible."

Is there a way to retrieve the BrowserRouter history from outside of the BrowserRouter component?

Having trouble with your JavaScript regex not functioning properly?