CODEWITHSUNDEEP
cssfirebug
Alexis
Alexis

Reputation: 25163

Use Firebug to get a deep copy of CSS in elements

I am using Firebug to inspect the elements of a webpage. On the right hand of the page there is a "style" tab that list all the CSS styling for a given tag. These CSS styling are coming from a linked CSS page.

What I am looking to do is somehow copy a set of divs with the CSS hardcoded in the div. This way I can copy and paste the elements and have the exact same styling. Is this possible to do with Firebug or perhaps another tool?

Upvotes: 6

Views: 3224

Answers (3)

Dmitry
Dmitry

Reputation: 4373

I used IE9 to accomplish this.

  1. Open a page where you want to grab a style in IE9
  2. Press F12 to display Developer Toolbar
  3. In the Developer Toolbar press Find and select "Select element by click"
  4. Then go to "View" > "Source" and select "Element source with style"

Upvotes: 7

Michael
Michael

Reputation: 4326

I'm not sure what exactly you're trying to do here but are you trying to apply the same style to multiple elements (divs)? If so you should use a css class. So your html will be

<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>

and css will be

.myClass
{
height:whatever;
width:whatever;
etc
}

Upvotes: -2

alex
alex

Reputation: 490143

I don't know about Firebug, but you could build a script to do it.

List the CSS you want to copy (every property you believe is required to make it portable) and then loop through in JS and getComputedStyle(). Then build a ; delimited list of property:value pairs, and assign it to the style attribute if your element and all children.

This doesn't look like an easy task - and you will no doubt run into problems.

Upvotes: 1

Related Questions