Is there a way in JQuery to apply the CSS of one element to another selected element?

I'm curious if there is a JQuery function available that can be used to transfer the exact CSS styles from one element to another. I want all the CSS properties to be applied without any additional inheritance.

For example:

<div id="d1">
    <p id="p1">Here is some text.</p>
</div>

<div id="d2">
    <p id="p2>Here is some other text.</p>
    <!-- I want this text in p2 to have the same styling as the text in p1, even after the inheritances of the divs are factored. -->
</div>

<script type="text/javascript">
    $(...).(...); // ??????????????
</script>

If there is a function in JQuery that can do this, it would save me a lot of time from trying to work around a master stylesheet in the CMS I am using.

javascriptjqueryhtmlcss

Answer №1

While this method may not be supported by Opera, it can help you achieve your desired outcome: http://jsfiddle.net/6o3f3em6/1/

  • Utilize the getComputedStyle function to retrieve all CSS attributes of the specified element
  • Convert the object into a CSS string
  • Apply the cssText to the designated element

Refer to the following code snippet for implementation:

var target = document.querySelector('#p1');
var receiver = document.querySelector('#p2');
var styles   = getComputedStyle(target);

var cssText = '';
for(var style in styles){
    cssText += style+':'+styles[style];
}

receiver.style.cssText = cssText;

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

In Javascript, when trying to call Firebase database child(), it may sometimes result in the return value being "

Here is the current setup: Firebase Database: setores: { -KkBgUmX6BEeVyrudlfK: { id: '-KkBgUmX6BEeVyrudlfK', nome: 'test' } -KkDYxfwka8YM6uFOWpH: { id: '-KkDYxfwka8YM6uFOWpH', nome ...

javascriptjqueryhtmlfirebasefirebase-realtime-database

Stop jQuery Tab from Initiating Transition Effect on Current Tab

Currently, I am utilizing jQuery tabs that have a slide effect whenever you click on them. My query is: How can one prevent the slide effect from occurring on the active tab if it is clicked again? Below is the snippet of my jQUery code: $(document).read ...

javascriptjqueryhtml

Struggling to incorporate a three-strike mechanism into my JavaScript game

I need to implement a feature where the user can make up to 2 mistakes before losing the game. Here's what I need to do: - Set up a global variable to keep track of the number of mistakes - Initialize this variable during the startGame function - M ...

javascripthtmljquerycss

What is the best way to bind a model to a directive in Angular.js?

I have been experimenting with different methods to create a two-way binding between my directive and repeater, but so far I haven't been successful. Although I have tried various strategies suggested online, the current setup does not pass item.myDat ...

javascriptangularjs

Encountering a 500 error while attempting to make two separate AJAX requests in Codeigniter

Currently working on a web application using Codeigniter, I am facing an issue with three dependent <select> inputs. The second <select> is reliant on the first, and the third is dependent on both the first and second. Using jQuery and AJAX to ...

jqueryajaxcodeigniter

How come when I applied height:100% and position: absolute to .test2, it ended up being 200px instead of the expected 204px

Upon setting the height of a container element to 200px, I encountered an issue when trying to set the height of another element within it to 100%. The height didn't render as expected, as height:100% takes the height of the parent element, which was ...

htmlcss

Obtain POST information through AJAX and jQuery

post.js $.post( "/scripts/update.php", {id: testId, age: testAge}, function(data) { $(".testDiv").html(data.testId); $(".testDiv2").html(data.testAge); } ); update.php $userId = $_POST["id"]; $userAge = $_POST["age]; // contact database ...

phpjqueryajaxjson

The CSS menu appears more compact when viewed on a different page

Recently, I've been working on a website for practice and decided to include a menu. It functions perfectly on the first webpage, but appears slightly smaller on the second one. Here's the code snippet I used for the menu on the initial page: &l ...

htmlcssmenu

What causes my React app menu to unexpectedly open while simply updating the state without any CSS modifications?

In the Header component, there is a button that triggers the toggleNav function in context.js when clicked. This function changes the state of isNavOpen from false to true, resulting in the opening of the navigation. Surprisingly, there doesn't appear ...

javascriptreactjs

Tips on providing an input value within a selection option

My issue arises when selecting the "Other" option and entering text values, only 'other' is printed instead of my inputted text value. How can I resolve this? <FormItem {...formItemLayout} label="Relation :" > ...

javascriptreactjs

Embedding an Iframe in the Main URL

I have a specific request where I've inserted an anchor tag within an IFRAME. Currently, when the anchor link is clicked, the page redirects within the IFRAME. However, I need the functionality to redirect to the main URL instead of staying within the ...

phphtmliframe

Having trouble getting PHP to display an image on the webpage

When attempting to output a simple image using PHP, I noticed that it only displayed a white square. This led me to believe that the IMG file could not be found. However, when I used a basic HTML IMG tag, the file was located without any issues. Even try ...

phphtmlimage

Combine words into lowercase in JavaScript variable

I'm struggling to understand why the data from a form field input is not being stored correctly in a SharePoint column data collection. Currently, when someone inputs a name into a form field, it should automatically populate a SharePoint list: http ...

javascriptjqueryhtmltwitter-bootstrapjavascript-objects

Encountering an infinite $digest() loop in AngularJS 1.4.8 while using ngOptions in a select when setting the model programmatically before the option is available in ngOptions

When upgrading from version 1.2.14 to 1.4.8, I encountered a problem that worked fine in the former but resulted in an infinite $digest() loop in the latter. To demonstrate this issue, you can view the following Fiddle. The Fiddle provides a clearer visual ...

javascriptangularjsng-optionsangularjs-ng-model

Unleashing the power of async/await in React: A comprehensive guide

Looking to simplify my code, I am interested in implementing async and await for the following code snippet. However, I am unsure of how to proceed. Any examples would be greatly appreciated. deletePost = (post) => { var post_id = post; try { ...

javascriptreactjs

Put <options> into <select> upon clicking on <select>

Is there a way to automatically populate a <select> list upon clicking on it? $(document).ready(function(){ $("body").on("click", "select", function(){ ajax(); //function to add more <option> elements to the select }); }); Loo ...

javascripthtmljquery

How to implement flexslider on a separate page within your Woocommerce website

I've successfully displayed a product on my homepage using the following shortcode: <?php echo do_shortcode('[product_page id="195"]');?> The product is shown with its main image and small thumbnails below it, and on the rig ...

jquerywordpresswoocommerce

Refresh a Div using JSON content with Struts2 Jquery Plugin

Is there a way to dynamically reload the content of a div with just a specific part of a JSON object in it? The code provided works perfectly, but it displays the entire JSON object within curly braces. I want only one variable from the object to be shown ...

jqueryjsonhtmlstruts2reload

Is there a way to use Selenium to automate the clicking of two buttons with empty href attributes? Each button has a function name and arguments within the href

Here is the HTML code for both buttons: <td> <a href="javascript:abcMy(2310);" class="btn btn-lawa btn-primary btn-primary-lawa">View</a> </td> <td> <a href="javascript:abcMy(2330);" class="btn btn-lawa btn-primary btn ...

javascriptseleniumselenium-webdriver

What is the reasoning behind the "open in a new tab" function triggering a GET request?

Check out this HTML tag: <a href="#" id="navBar_navBarInput_3_subNavDropdownInput_0_subNavLinkInput_0" onclick="redirectPost(4,'EntryData.aspx');">My Cool Link</a> The Javascript function "redirectPost" function redirectPost(id, ur ...

javascripthtmlwebrequest