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

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

Altering a CSS class with JavaScript?

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

Contents

  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

#35135 — Altering a CSS class with JavaScript?

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.

-- 
  (c) John Stockton, near London, UK.  Using Google Groups.           |
 Mail: J.R.""""""""@physics.org - or as Reply-To, if any.             |

[toc] | [next] | [standalone]

#35137

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>

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

#35138

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>

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

#35145

"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)

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

#35178

On Friday, June 1, 2018 at 11:38:53 AM UTC+1, Evertjan. wrote:

> ...

> with modern browsers you could play with:

But what is "modern"?  I frequently consider it as meaning "after
the fall of the Berlin Wall" (of which I have a small piece).

Respondents have apparently not noticed my wish to turn the
display OFF and later ON.

I tend to ignore code which I cannot understand on first reading
unless it is marked as tested - the first part rules out, for
example, anything using the ==> operation, which seems to me as
a first step to the abyss of <script type="text/APL">.

The following works in all 5 of my readily-available browsers,
so I have hopes of the method working in the real page :-


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>XX</title>
</head>
<body>
<script type="text/javascript">

var DSPsheet = document.createElement('style')
document.body.appendChild(DSPsheet)	// empty

function S1() { DSPsheet.innerHTML = ".DSP {background-color: cyan;}" }

function S2() { DSPsheet.innerHTML = ".DSP {background-color: lime;}" }

</script>

<div>
XX <input type=button onclick="S1()">
YY <input type=button onclick="S2()">
ZZ
</div>

<pre>
0
<span class=xxx>.A.</span>
1
<span class=DSP>:B:</span>
2
<span class=yyy>.C.</span>
3
<span class=DSP>:D:</span>
4
<span class=zzz>.E.</span>
5
</pre>

</body>
</html>


-- 
  (c) John Stockton, near London, UK.  Using Google Groups.           |
 Mail: J.R.""""""""@physics.org - or as Reply-To, if any.             |

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

#35180

Dr J R Stockton wrote:

> I tend to ignore code which I cannot understand on first reading
> unless it is marked as tested - the first part rules out, for
> example, anything using the ==> operation, which seems to me as
> a first step to the abyss of <script type="text/APL">.

The provided solutions are simple. Unless you are simple, then there is little to be done.

Since I assume you are not, I expected you would at least have a followup question or two.

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

#35149

Michael Haufe (TNO) wrote:

> 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.

That was my second reaction.  My first one was “Google is your friend!”.

>> 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')

As in this case there are “numerous HTML elements of class ZYZ”, one would 
want to use document.querySelectorAll('.xyz') instead.

There is also a DOM-built-in getElementsByClassName() now which should be 
more efficient to use (as it only needs to consider “class” attribute 
values).

However, ISTM that something like that is precisely what the OP tried to 
avoid out of valid concerns about runtime and memory efficiency.

The good news is that the collections to which references are returned are 
“live” (this is where, I think, all emulations must fall short); so it 
suffices to store the reference so that it is non-locally accessible.
The bad news is that iterating over the items still does not scale well.

However, one must keep in mind that the “class” attribute value can also be 
modified on a common ancestor or sibling instead of all target elements;
in combination with a contextual selector, this avoids the aforementioned 
iteration.

>>     xyz.classList.add('xyz-visible')

… where the usual DOM4/HTML5 caveats apply, of course.

> 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 =>

Although a single parameter identifier is not a syntax error (in Google V8 
JavaScript), for consistency ISTM to be a good idea to always use 
parentheses for the parameter list, respectively.

>       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>

For more than one-time access, it is more efficient to create and use a 
selector-to-rule map:

As a starting point:

  let selectorToRule = new Map();

  Array.from(document.styleSheets).forEach((sheet) => {
    Array.from(sheet.cssRules || sheet.rules).forEach((rule) => {
      let selectorText = rule.selectorText;
      selectorToRule.set(selectorText,
        selectorToRule.has(selectorText)
          ? selectorToRule.get(selectorText).push(rule)
          : [rule]);
    });
  });

  selectorToRule.get(".xyz")[0].style.display = 'block';

    [Thanks for reminding me of ECMAScript 2015’s Array.from(); so unbounded
     .slice.call() should be a thing of the past now.  JFTR, I added an
     Array.from() that uses Array.prototype.map() to JSX:object.js on
     2013-09-04 :) ]

The most simple, compatible, and arguably most efficient, way to modify a 
stylesheet is to append a new “link” or “style” element to the “head” 
element.  (However, I am not certain if it works with “link” elements, too.)

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

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

#35165

On Friday, June 1, 2018 at 12:26:03 PM UTC+1, Thomas 'PointedEars' Lahn wrote.

<http://twain.lib.virginia.edu/projects/rissetto/offense.html>

-- 
  (c) John Stockton, near London, UK.  Using Google Groups.           |
 Mail: J.R.""""""""@physics.org - or as Reply-To, if any.             |

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

#35168

Dr J R Stockton wrote:

> On Friday, June 1, 2018 at 12:26:03 PM UTC+1, Thomas 'PointedEars' Lahn
> wrote.
> 
> <http://twain.lib.virginia.edu/projects/rissetto/offense.html>

<https://en.wiktionary.org/wiki/asshole#Noun>

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

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

#35169

John G Harris <niam@jghnorth.org.uk.invalid> wrote:

> On Sat, 02 Jun 2018 20:51:18 +0200, Thomas 'PointedEars' Lahn
> <PointedEars@web.de> wrote:
> 
>   <snip>
> ><https://en.wiktionary.org/wiki/asshole#Noun>
> 
> Wrong spelling.
> 
>   John

Hey, Pointy, you daft pillock, I think this is yours; 
it doesn't belong in alt.1d.

-- 
^Ï^.           Sn!pe           <snipeco.1@gmail.com>

My pet rock Gordon just is.
 

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

#35171

Am 01.06.2018 um 13:25 schrieb Thomas 'PointedEars' Lahn:

> The most simple, compatible, and arguably most efficient, way to modify a 
> stylesheet is to append a new “link” or “style” element to the “head” 
> element.  (However, I am not certain if it works with “link” elements, too.)

  var link = document.createElement("link");
  link.href = "test.css"
  link.type = "text/css";
  link.rel = "stylesheet";
  link.media = "screen, print"
  document.body.appendChild(link);

Greetz,
MK
-- 
Kopp-Verlag-Gläubige, Religionsdeppen, rechte Vollidioten
 und ähnlicher Bio-Abfall werden ohne Hinweis ignoriert!
            - Sei eine Möwe: Scheiss drauf -

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

#35172

Maik Koenig wrote:
> Am 01.06.2018 um 13:25 schrieb Thomas 'PointedEars' Lahn:
>> The most simple, compatible, and arguably most efficient, way to modify a 
>> stylesheet is to append a new “link” or “style” element to the “head” 
>> element.  (However, I am not certain if it works with “link” elements, too.)
> 
>   var link = document.createElement("link");
>   link.href = "test.css"
>   link.type = "text/css";
>   link.rel = "stylesheet";
>   link.media = "screen, print"
>   document.body.appendChild(link);

You are missing the point and have yet to make one.


PointedEars
-- 
    realism:    HTML 4.01 Strict
    evangelism: XHTML 1.0 Strict
    madness:    XHTML 1.1 as application/xhtml+xml
                                                    -- Bjoern Hoehrmann

[toc] | [prev] | [standalone]

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

csiph-web