Determining if an element contains specific CSS properties and then applying those styles to its parent

I am trying to determine if the <img> element has inline CSS properties defined. If it does, I want to apply those CSS properties to its parent and remove the original CSS declaration.

This is my attempt at solving the issue:

var $el = $('.article > img');
$el.each(function () {
  if ($(this).css("float") == "left") { $(this).parent().css("float","left"); }
  if ($(this).css("float") == "right") { $(this).parent().css("float","right"); }
})

The img tag may have CSS for float, margin, or both, or neither of them. However, my current code only handles one rule at a time.

Could someone please advise on how I can modify the code to handle both CSS rules?

jquerycss

Answer №1

One way to adjust the parent element based on the styling of its child images is by checking for properties like float or margin and then applying those values to the parent. Here's an example:

var $el = $('.article > img');
$el.each(function() {
  const float = $(this).css('float')
  const marginT = $(this).css('margin-top')
  const marginL = $(this).css('margin-left')
  const marginR = $(this).css('margin-right')
  const marginB = $(this).css('margin-bottom')

  // Set the css to the parent based on child img
  if (float !== 'none') $(this).parent().css("float", float);
  if (marginT !== '0px' && marginT !== '')
    $(this).parent().css("margin-top", marginT);
  if (marginL !== '0px' && marginT !== '')
    $(this).parent().css("margin-left", marginL);
  if (marginR !== '0px' && marginT !== '')
    $(this).parent().css("margin-right", marginR);
  if (marginB !== '0px' && marginT !== '')
    $(this).parent().css("margin-bottom", marginB);

  // Remove the original image css
  $(this).removeAttr('style');
})
.article { border: 1px solid red}
img {width: 50px;height: 50px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="article">
  <img alt="Image 1" style="float:left" />
</div>
<div class="article">
  <img alt="Image 2" style="margin: 5px 70px" />
</div>
<div class="article">
  <img alt="Image 3" style="float:right;margin: 10px" />
</div>

Note that:

  • If the element doesn't have a float property, $(this).css('float') will return none.
  • If there is no margin-top set, $(this).css('margin-top') will default to 0px, and so on.

We are using this approach to dynamically update the parent's CSS based on the child image styles.

Answer №2

To easily copy CSS styles between elements, consider using the jquery.copycss.js plugin.

$('#some-element').copyCSS('#another-element');  // duplicate all styles
$('#some-element').copyCSS('#another-element', ['top', 'left']);  // replicate only top and left properties
$('#some-element').copyCSS('#another-element', null, ['top', 'left']);  // duplicate all except top and left

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Properties of jQuery UI events and the ui object are important for manipulating user

While working with the jQuery UI framework for Interactions, you can utilize custom functions that involve two parameters known as 'event' and 'ui'. I have been trying to discover the methods and properties associated with these paramet ...

jqueryjquery-ui

Combining multiple JSON objects in an array into one single object with the help of jQuery

My array consists of JSON objects like the ones shown below: [{ "Name": "Nikhil", "Surname": "Agrawal" }, { "profession": "java developer", "experience": "2 years" }, { "company": "xyz", "city": "hyderabad" }] What I aim to achiev ...

javascriptjqueryjson

Conceal a div and label after a delay of 5 seconds with a JavaScript/jQuery function in C#

Here is a sample div: <div class="alert alert-success alert-dismissable" runat="server" visible="false" id="lblmsgid"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> ...

javascriptc#jquery

Styling with CSS: Using a Base64 Encoded Image in the Background URL

Can a Base64 encoded image be loaded as a background image URL without exposing the actual encoded string in the page source? For example, if a Node API is used to GET request at "/image", it returns the serialized Base64 data. res.json("da ...

javascripthtmlcssnode.js

Tips for looping through multi-dimensional arrays in jsredner

I have the JSON data provided below that represents a music score: [ { "Name":"Billy in the Lowground", "Key":"A", "chords":[ [ "G", "", "D", "" ], // Addition ...

jqueryarraysnestedjsrender

What is the best method for specifying CSS styles for a Vue.js component during the registration process?

Is it possible to register a custom Vue.js component using the following code? // register Vue.component('my-component', { template: '<div class="my-class">A custom component!</div>' }) For more information, you ...

javascriptcssvue.jsstylesheetvue-component

"Selecting an element through Drag/Drop will result in the element being

INQUIRY I've encountered an issue with a draggable element ($("#draggable")) that interacts with a checkbox ($('#checkable')). When the $('#draggable') is dragged onto a box ($('#droppable')), it checks $(&apos ...

javascriptjqueryhtmljquery-uidrag-and-drop

Tips for customizing the appearance of Java FX TableView column headers with CSS

I am relatively new to JavaFX and delving into CSS stylesheets, as well as using stackoverflow. I am curious about how one can customize the styling of a table column header. This is what my current column header looks like: Current appearance of my table ...

cssjavafxtableviewcolumnheader

Click on every checkbox across all pages

I have developed a table in ASP.NET MVC that contains checkboxes. You can view this table with checkboxes at table with checkboxes. I have incorporated a script that enables the checkboxes to be automatically selected when the upper checkbox is chosen. Ho ...

jqueryasp.net-mvccheckboxdatatablepagination

Error generated by Jquery Ajax Call due to undefined response

I've been struggling with sending two variables to PHP using a Jquery Ajax call. It seems to work fine when async is set to false, but for some reason fails when it's set to true. Additionally, the code functions properly if only one variable is ...

phpjqueryajax

Having trouble retrieving JSON data using jQuery and Handlebars?

Hey there, I'm new to JSON and all the talk about JavaScript templating engines for front-end dynamic changes. However, I'm struggling to make progress. Can anyone help me out? The JSON file is named data.json { users: [{ userna ...

jqueryjsonhandlebars.jseach

Create a layout of div elements aligned to the right, utilizing a parent container div that automatically adjusts its size to fit the

My attempt at this design: https://jsfiddle.net/j75hxxa2/1/ The goal is to have the block positioned on the right side and eliminate the extra gray area. By applying float: right; To the parent element, the child elements become very small. Trying ...

htmlcss

Ways to automatically divide lists into various div elements

Hey there! I currently have a list of categories on my page that is subject to change. I'm looking for assistance in creating a loop that will divide my lists into groups of 5 items per div. For example: foreach($categories as $cat) <label> ...

phphtmlcsslaravel-blade

Maintain text while transitioning to another page

On my webpage (refer to image for details), users need to select options through a series of steps. The process involves clicking on a link in the top box, then entering a search term in the searchbox to display relevant links in div1. Clicking on a link ...

javascriptjqueryhtmlajax

Script failing to refresh data with Ajax

Struggling with creating an ajax script to automatically update the in-game money balance of users on my website. Unfortunately, it's not functioning as expected and I'm quite inexperienced with ajax. Any assistance would be greatly valued. Belo ...

javascriptphpjquerymysqlajax

What is the best way to extract a JSON value and use it across multiple functions?

Currently, everything seems to be working fine. However, I'm unsure about the correct way to call the json data. I attempted using a direct link but it didn't work. Do I need to modify the "data" parameters? I'm confused because I saw that ...

javascriptjqueryhtmljsonfunction

Numeric value along with two characters following the decimal place

Imagine I have this number: 25297710.1088 My goal is to add spaces between the groups of digits and keep only two decimal places, like this: 25 297 710.10 I tried using the following code snippet: $(td).text().reverse().replace(/((?:\d{2})&bso ...

javascriptjqueryreplace

The element cannot be clicked at this point as another element would intercept the click:

Having an issue with clicking a button at the top of the page. The CSS selector works fine in my local Eclipse environment, but when trying to run it on Jenkins server on my local machine, it fails with an error stating that the element is not clickable. T ...

javacssseleniumjenkinscucumber

Tips for dynamically passing a string into a Javascript function

Here is a JavaScript function that I have: function doIt(link) { alert(link); } I am using this function in the following JavaScript code snippet. Here, I am dynamically creating an anchor tag and appending it to my HTML page: jQuery.each(data, func ...

javascriptjqueryhtml

Setting initial opacity for CSS on page load

I'm not a pro at web design, but I'm trying to create my own website. I've divided my page into two sections - the left side for the menu bar and the right side for content. To add a 'cool' blur effect over my menu bar, I decided t ...

htmlcss