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

Groups > comp.lang.javascript > #35145

Re: Altering a CSS class with JavaScript?

Show all headers | View raw

"Michael Haufe (TNO)" <tno@thenewobjective.com> wrote on 01 Jun 2018 in
comp.lang.javascript: 

> Michael Haufe (TNO) wrote:
>> Dr J R Stockton wrote:
>> > I have a long page containing numerous HTML elements
>> > of class ZYZ.
>> > 
>> > On page load complete, class XYZ is {display: block} or
>> > not defined.
>> > 
>> > At a certain moment, I wish class XYZ to be {display: none}.
>> > 
>> > At a later moment, I wish class XYZ to be {display: block}.
>> > 
>> > What JavaScript do I need to alter the value of the display
>> > property of a class?
>> > 
>> > How can JavaScript create the initial XYZ?
>> > 
>> > The page must be redrawn after the change, preferably just one
>> > redraw per change to XYZ.
>> 
>> 
>> My first reaction is that you are approaching it in potentially a less
>> than optimal manner. Here is an impressionistic example of my
>> suggestion: 
>> 
>> <style>
>>     .xyz {
>>         display: none;
>>         ...
>>     }
>>     .xyz-visible {
>>         display: block;
>>         ...
>>     }
>> </style>
>> 
>> <div class="xyz"> Hello World </div>
>> 
>> <script>
>>     let xyz = document.querySelector('.xyz')
>>     xyz.classList.add('xyz-visible')
>> </script>
> 
> 
> If you insist on manipulating a css rule directly, it can be done in a
> bit more complicated way: 
> 
> <script>
>   function getRuleWithSelector(selector) {
>     return Array.from(document.styleSheets, sheet =>
>       Array.from(sheet.cssRules).find(rule => rule.selectorText ===
>       selector) 
>     )[0]
>   }
>   // finding the selector is expensive, so only do it once
>   let xyzRule = getRuleWithSelector(".xyz")
>   xyzRule.style.display = 'block'
> </script>

I would take another route:

1/ html:

<body> 

<div class='xyz'>hide and seek</div>
<div class='xyz'>hide and seek too</div>

</body>

2/ use these styles:
 
<style>
     .xyz {
         display: none;
      }
     body.showxyz .xyz {
         display: block;
     }
</style>

3/ now you can make all .xyz divs display block by just:

<script>
     document.body.className = 'showxyz';
</script>

[not tested!]

=========================

with modern browsers you could play with:

<button
onclick="document.body.classList.toggle('showxyz')">
toggle me
</button>

<https://caniuse.com/#search=classList>
[not tested!]

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

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Altering a CSS class with JavaScript? Dr J R Stockton <J.R.Stockton@physics.org> - 2018-05-31 14:44 -0700
  Re: Altering a CSS class with JavaScript? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-05-31 22:23 -0700
    Re: Altering a CSS class with JavaScript? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-05-31 22:28 -0700
      Re: Altering a CSS class with JavaScript? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2018-06-01 12:38 +0200
        Re: Altering a CSS class with JavaScript? Dr J R Stockton <J.R.Stockton@physics.org> - 2018-06-03 11:17 -0700
          Re: Altering a CSS class with JavaScript? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2018-06-05 10:50 -0700
      Re: Altering a CSS class with JavaScript? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-06-01 13:25 +0200
        Re: Altering a CSS class with JavaScript? Dr J R Stockton <J.R.Stockton@physics.org> - 2018-06-02 11:06 -0700
          Re: Altering a CSS class with JavaScript? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-06-02 20:51 +0200
            Re: Altering a CSS class with JavaScript? snipeco.2@gmail.com (Sn!pe) - 2018-06-02 21:19 +0100
        Re: Altering a CSS class with JavaScript? Maik Koenig <usenetspam@maikkoenig.de> - 2018-06-02 22:48 +0200
          Re: Altering a CSS class with JavaScript? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-06-03 00:25 +0200

csiph-web