0

I have some basic css:

#awesome1{
    color: red;
}

and html:

<div id="awesome1"></div>

I want to change the id awesome1 to awesome2 with jQuery, but keep the css from old id.

But when I type:

jQuery('#awesome1').attr('id', 'awesome2');

It changes the div's id in DOM, but of course, my div loses the color: red.

Is there a way to change the "id in css" or "copy all the attributes" (I cannot assume that's only color) from old id to new one?

Update, clarification:

The point is, I change the id to another dynamically, based on some ajax data - I don't know (at the time I generate the css), which id it will be, so I cannot assume that it will be awesome2 and hard-code it in e.g. css.

P.s. Please read especially the bold text before posting new answers. I'm aware of methods when I could assume what would be the new id and hard-code it to css, or resign from id for classes. But in my example, I cannot. And my problem is like the topic: Change id but keep the css related to the old id in jQuery.

PolGraphic
  • 3,233
  • 11
  • 51
  • 108
  • 1
    also take a look at this https://github.com/moagrius/copycss – milagvoniduak May 08 '14 at 18:12
  • You should generally avoid changing an elements ID like the plague, there's usually no good reason to do so. To target many different elements with css, you'd use the class selector. – adeneo May 08 '14 at 18:13
  • Usually not. But it's that "rare but good" reason. I work on some UML scheme generator. Each element has it's id related to it's encoded name. When user changes the name of the element (e.g. class, package, relation), which happens sometimes, the id has to be changed, but the css data (position of the element, color etc.) cannot be lost. The whole application works fine with ajax, without reload and I want to keep it that way, so I need to change the id dynamically. – PolGraphic May 08 '14 at 18:15
  • @PolGraphic But what all in your website relies on the `id` being set? If you're going to target by an `id` that changes, and your current code doesn't work, then it's not structured in a good way. I know you said you're making UML, but I don't exactly know why you'd need the `id` to be set, and to be correct and easily targetable – Ian May 08 '14 at 18:24
  • @MyP3uK Can you post your link as an answer? It's a bit "disappointing" that I would have to use 3rd partly plug-in for such task, but still you gave the only answer that meets my requirements (the topic and bold text). – PolGraphic May 08 '14 at 18:29
  • Posted the answer, there is also a link to an existing SO post. – milagvoniduak May 08 '14 at 18:33

6 Answers6

2

What about you add the following in your CSS ?

#awesome2{
    color: red;
}

Or instead of using CSS on ID use it on class like this

<div id="awesome1" class="something"></div>

.something{
    color: red;
}

This way you will always keep the same style from the class but can use whatever ID you want

Gabriel
  • 327
  • 4
  • 13
  • In that way, I could just write awesome2 in html as well from start. The point is, I change the id to another dynamically, based on some ajax data - I don't know (at the time I generate the css), which id it will be. And I have to work with id not class. – PolGraphic May 08 '14 at 18:08
  • 1
    or even better #awesome1, #awesome2 {color: red} – bottens May 08 '14 at 18:08
  • Updated my answer with a better alternative – Gabriel May 08 '14 at 18:09
  • 1
    I would only consider your last solution. First one is not flexible, what if he wanted up to `#awesome10`? – Colandus May 08 '14 at 18:11
  • @Colandus I totally agree, if it would be something really simple the first one could be considerable, but in any other case the second one is probably the best thing to do. – Gabriel May 08 '14 at 18:16
1

This plugin will allow you to copy css from one element to another

https://github.com/moagrius/copycss

Also similar question was already answered on StackOverflow here -> Can jQuery get all CSS styles associated with an element?

Community
  • 1
  • 1
milagvoniduak
  • 3,214
  • 1
  • 18
  • 18
  • Thanks for the link. I was hoping that I won't need the plug-in for that, but at least it works. The question is similar, but not the same (they want to copy "all the css" associated with the element - so the css from id, all the classes and other selectors). But I found there an option to solve my problem. Thanks for the answer. – PolGraphic May 08 '14 at 18:35
0
jQuery('#awesome1').attr('id', 'awesome2');
$('#awesome2').css('color', 'red');
jianweichuah
  • 1,417
  • 1
  • 11
  • 22
0

If all your id tags are going to start with the word 'awesome', you could change your CSS to:

[id^=awesome]{
    color: red;
}

Demo Fiddle

If they just contain the word awesome, chante the caret (^) to an asterisk.

That said, I'd recommend you take a step back and think if there isnt a better way to do what you intend.

Community
  • 1
  • 1
SW4
  • 69,876
  • 20
  • 132
  • 137
  • Unfortunately, they don't. And I don't want all of them (awesome1, awesome2, awesome3) to share the same color. Anyway, thanks for interesting css 3 example – PolGraphic May 08 '14 at 18:18
0
<html>
<head>
    <title>test</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
    <style type="text/css">
        div[id^=awesome] {
            color: red;
        }
    </style>

    <script type="text/javascript">
        var something = function () {
            jQuery('#awesome1').attr('id', 'awesome2');
        }
    </script>
</head>
<body>

    <div id="awesome1">this is test</div>


</body>
</html>
Johney
  • 87
  • 6
  • It's just the same answer as @SW4 gave few mins ago, please read my comment to it: "(...) And I don't want all of them (awesome1, awesome2, awesome3) to share the same color." – PolGraphic May 08 '14 at 18:23
  • Is it mandatory for you to use id based CSS like #awesome2 etc. Can you use CSS classes? – Johney May 08 '14 at 18:27
  • Yes, I want to keep it as ID, because it truly is ID rather than just class (it's unique identifier in the scope of whole document that identify the element of diagram) - and I use it a lot in my application. Making it class is just like making normal text field from unique key in SQL. – PolGraphic May 08 '14 at 18:34
-1

There are only two times you should be associating CSS with an ID:

  • When the element with that ID is going to keep that ID throughout the page's lifetime.
  • When it's OK for the element to lose those properties if it loses the ID.

When you don't want things to change even though an element's ID changes, you need to use a different selector for those things. I recommend using a class, something like this CSS:

.awesome {
    color: red;
    /* other stuff that shouldn't change when the ID changes */
}

#awesome1 {
    /* ID-specific CSS for #awesome1 */
}


#awesome2 {
    /* ID-specific CSS for #awesome2 */
}

and this HTML:

<div id="awesome1" class="awesome"></div>

Now, when you change the ID, the element will keep the things from its .awesome class, but change according to its ID for things that should change for that.

The Spooniest
  • 2,863
  • 14
  • 14
  • 1
    As I've bolded in my question: "I don't know (at the time I generate the css), which id it will be, so I cannot assume that it will be awesome2 and hard-code it in e.g. css" – PolGraphic May 08 '14 at 18:19