Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #22889 > unrolled thread

How to change style from id to class?

Back to article view | Back to comp.lang.javascript

Contents

  How to change style from id to class? WanWan <jippijappo@hotmail.com> - 2014-01-30 07:43 -0800
    Re: How to change style from id to class? Bjoern Hoehrmann <bjoern@hoehrmann.de> - 2014-01-30 17:12 +0100
      Re: How to change style from id to class? WanWan <jippijappo@hotmail.com> - 2014-01-30 08:24 -0800
        Re: How to change style from id to class? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-30 20:17 +0100
          Re: How to change style from id to class? WanWan <jippijappo@hotmail.com> - 2014-01-30 12:33 -0800
        Re: How to change style from id to class? Bart Van der Donck <bart@nijlen.com> - 2014-01-31 00:45 -0800
          Re: How to change style from id to class? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-01-31 11:59 +0100
          Re: How to change style from id to class? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-31 13:55 +0100

#22889 — How to change style from id to class?

Hello, is there a way to change the style from a id item to class using javascript?

For example:
div#banana
to
div.banana

After giving the item an unique id, the style no longer apply.

[toc] | [next] | [standalone]

#22890

* WanWan wrote in comp.lang.javascript:
>Hello, is there a way to change the style from a id item to class using javascript?
>
>For example:
>div#banana
>to
>div.banana
>
>After giving the item an unique id, the style no longer apply.

There are several ways to interpret your question. For instance, you
might have a style sheet with rules like

  div#example { color: blue; ... }

and want to use JavaScript to turn that into a style sheet like

  div.example { color: blue; ... }

It is also possible you have a document with an element like

  <div id='example'>...</div>

and want to turn that, using JavaScript, into

  <div class='example'>...</div>

It is also possible you are not asking about either problem. Could you
clarify what you are trying to accomplish?
-- 
Björn Höhrmann · mailto:bjoern@hoehrmann.de · http://bjoern.hoehrmann.de
Am Badedeich 7 · Telefon: +49(0)160/4415681 · http://www.bjoernsworld.de
25899 Dagebüll · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/ 

[toc] | [prev] | [next] | [standalone]

#22891

I've already changed using javascript:

<div id='example'>...</div>
to
<div id='uniqueId1' class='example'>...</div>


Now the style no longer apply.
A possible solution is to change using javascript:

div#example { color: blue; ... }
to
div.example { color: blue; ... }

OR apply div#example to <div id='uniqueId1' class='example'> some other way.


kl. 17:12:22 UTC+1 torsdag 30. januar 2014 skrev Bjoern Hoehrmann følgende:
> * WanWan wrote in comp.lang.javascript:
> 
> >Hello, is there a way to change the style from a id item to class using javascript?
> 
> >
> 
> >For example:
> 
> >div#banana
> 
> >to
> 
> >div.banana
> 
> >
> 
> >After giving the item an unique id, the style no longer apply.
> 
> 
> 
> There are several ways to interpret your question. For instance, you
> 
> might have a style sheet with rules like
> 
> 
> 
>   div#example { color: blue; ... }
> 
> 
> 
> and want to use JavaScript to turn that into a style sheet like
> 
> 
> 
>   div.example { color: blue; ... }
> 
> 
> 
> It is also possible you have a document with an element like
> 
> 
> 
>   <div id='example'>...</div>
> 
> 
> 
> and want to turn that, using JavaScript, into
> 
> 
> 
>   <div class='example'>...</div>
> 
> 
> 
> It is also possible you are not asking about either problem. Could you
> 
> clarify what you are trying to accomplish?
> 
> -- 
> 
> Björn Höhrmann · mailto:xx@xx.xx· http://bjoern.hoehrmann.de
> 
> Am Badedeich 7 · Telefon: +49(0)160/4415681 · http://www.bjoernsworld.de
> 
> 25899 Dagebüll · PGP Pub. KeyID: 0xA4357E78 · http://www.websitedev.de/

[toc] | [prev] | [next] | [standalone]

#22892

WanWan wrote:
^^^^^^
Please use your real name and avoid the borken Google Groups.

> I've already changed using javascript:
> 
> <div id='example'>...</div>
> to
> <div id='uniqueId1' class='example'>...</div>
> 
> 
> Now the style no longer apply.
> A possible solution is to change using javascript:

There is no javascript.  You would be using an ECMAScript implementation to 
access the DOM implementation; the former could be Mozilla JavaScript if it 
was in a Mozilla-based browser.

<http://PointedEars.de/es-matrix>
 
> div#example { color: blue; ... }
> to
> div.example { color: blue; ... }

Not possible.  The “selectorText” property is read-only in at least one 
major DOM implementation, the Gecko DOM.

> OR apply div#example to <div id='uniqueId1' class='example'> some other
> way.

You can create and append a new rule having the same CSS property 
specifications but a different selector.

> [top post]

<http://PointedEars.de/faq#posting>

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#22893

Thanks!

kl. 20:17:11 UTC+1 torsdag 30. januar 2014 skrev Thomas 'PointedEars' Lahn følgende:
> WanWan wrote:
> 
> ^^^^^^
> 
> Please use your real name and avoid the borken Google Groups.
> 
> 
> 
> > I've already changed using javascript:
> 
> > 
> 
> > <div id='example'>...</div>
> 
> > to
> 
> > <div id='uniqueId1' class='example'>...</div>
> 
> > 
> 
> > 
> 
> > Now the style no longer apply.
> 
> > A possible solution is to change using javascript:
> 
> 
> 
> There is no javascript.  You would be using an ECMAScript implementation to 
> 
> access the DOM implementation; the former could be Mozilla JavaScript if it 
> 
> was in a Mozilla-based browser.
> 
> 
> 
> <http://PointedEars.de/es-matrix>
> 
>  
> 
> > div#example { color: blue; ... }
> 
> > to
> 
> > div.example { color: blue; ... }
> 
> 
> 
> Not possible.  The "selectorText" property is read-only in at least one 
> 
> major DOM implementation, the Gecko DOM.
> 
> 
> 
> > OR apply div#example to <div id='uniqueId1' class='example'> some other
> 
> > way.
> 
> 
> 
> You can create and append a new rule having the same CSS property 
> 
> specifications but a different selector.
> 
> 
> 
> > [top post]
> 
> 
> 
> <http://PointedEars.de/faq#posting>
> 
> 
> 
> -- 
> 
> PointedEars
> 
> 
> 
> Twitter: @PointedEars2
> 
> Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#22901

WanWan wrote:
 
> I've already changed using javascript:
> <div id='example'>...</div>
> to
> <div id='uniqueId1' class='example'>...</div>
> Now the style no longer apply.
> 
> A possible solution is to change using javascript:
> div#example { color: blue; ... }
> to
> div.example { color: blue; ... }
> OR apply div#example to <div id='uniqueId1' 
> class='example'> some other way.

I think you're looking for the 'className' property, eg.

  <div id="id1" class="class1"> ... </div> 
  <input type="button" value="Change class"
   onClick="document.getElementById('id1').className='class2';">

Hope this helps,

-- 
 Bart

[toc] | [prev] | [next] | [standalone]

#22904

Bart Van der Donck <bart@nijlen.com> wrote on 31 jan 2014 in 
comp.lang.javascript:

> WanWan wrote:
>  
>> I've already changed using javascript:
>> <div id='example'>...</div>
>> to
>> <div id='uniqueId1' class='example'>...</div>
>> Now the style no longer apply.
>> 
>> A possible solution is to change using javascript:
>> div#example { color: blue; ... }
>> to
>> div.example { color: blue; ... }
>> OR apply div#example to <div id='uniqueId1' 
>> class='example'> some other way.
> 
> I think you're looking for the 'className' property, eg.
> 
>   <div id="id1" class="class1"> ... </div> 
>   <input type="button" value="Change class"
>    onClick="document.getElementById('id1').className='class2';">

and in reverse, when the element is the only one with that classname:

onClick = "document.getElementByClassName('class3')[0].id = 'id7';">

or, more specificly, when the element is just the only one in a container:

onClick = "myContainer.getElementByClassName('class3')[0].id = 'id7';">

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#22906

Bart Van der Donck wrote:

> WanWan wrote:
>  
>> I've already changed using javascript:
   ^^^^^^^^^^^^^^^^^^^^
>> <div id='example'>...</div>
>> to
>> <div id='uniqueId1' class='example'>...</div>
>> Now the style no longer apply.
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>> A possible solution is to change using javascript:
>> div#example { color: blue; ... }
>> to
>> div.example { color: blue; ... }
>> OR apply div#example to <div id='uniqueId1'
>> class='example'> some other way.
> 
> I think you're looking for the 'className' property, eg.
> 
>   <div id="id1" class="class1"> ... </div>
>   <input type="button" value="Change class"
>    onClick="document.getElementById('id1').className='class2';">

I think you want to read their posting again.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web