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

Groups > comp.lang.javascript > #28660

Re: Change font size in multiple classes

Show key headers only | View raw

Andrew Poulos wrote:

> On 6/09/2015 10:07 PM, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>> Within the HTML there's a STYLE element with a selector for every SPAN
>> […]
>>> […]
>>> I'm not sure whether I should
>>>
>>> - find all the "span.text" selectors
>>> - find and modify the font-size selector
>>>
>>> or
>>>
>>> - find all the SPAN elements
>>> - get and modify the font size directly
>>>
>>> Is one way "better" than the other or is there another way to do this?
>>
>> If there are many “span” elements, the former is more efficient than the
>> latter; insofar it is better.
> 
> Ok, the number of "span.text" selectors matches the number of SPAN
> elements but its better to work through the STYLE element than the HTML
> looking for SPAN elements.

ACK.  Note that this can be greatly simplified nowadays (and with the proper 
emulation of ECMAScript Array methods, such as provided by my JSX):

  var rules = [];

  [].forEach.call(document.styleSheets, function (styleSheet) {
    rules = rules.concat([].slice.call(
      styleSheet.cssRules || styleSheet.rules));
  });

  var relevantRules = rules.filter(function (rule) {
    return /(?:^|\s)span\.text\d+Font\d+\s*(?:,|$)/.test(rule.selectorText);
  });

“relevantRules” can further be filtered to contain only the rules that have 
the “font-size” property set, and/or you can .forEach() on it, and do the 
test in the pseudo-loop.
 
>> There is another way to do this.
> 
> What way would you recommend? Currently I working through the
> styleSheets and changing in pixel dimensioned font size to EMs.

Given that you are modifying a stylesheet based on previous declared 
property values, and that you need to support IE 8, this is the best 
approach.  (In our company, we have discontinued support for IE 8 on most of 
our platforms, based on the fact that its users constitute less than 1 % of 
our visitors and customers.)

Otherwise I would have recommended to consider adding a CSS3 style rule to 
override declarations for all “span” elements whose “class” attribute value 
contains a class name that begins with “text”:

  span[class^="text"],
  span[class~=" text"] {
    property-you-want-to-override: new-value !important;
  }

<http://www.w3.org/TR/css3-selectors/#attribute-substrings>

You can do this statically, or with client-side scripting.  The most 
efficient and compatible way to augment stylesheets with client-side 
scripting is to append a new “style” element:

  var style = document.createElement("style");
  style.type = "text/css";
  var styleText = 'span[…] …';

  if (typeof style.styleSheet != "undefined")
  {
    /* older MSHTML */
    style.styleSheet.cssText = styleText;
  }
  else
  {
    style.appendChild(document.createTextNode(styleText));
  }

  (document.head || document.getElementsByTagName("head")[0])
    .appendChild(style);

If the third party is using “!important” in their stylesheet, you may have 
to add more simple selectors in the rule’s selector in order to increase 
the selector’s specificity.

Bear in mind that “!important” declarations in the user stylesheet always 
have the greatest weight.

<http://www.w3.org/TR/CSS2/cascade.html#cascade>
<http://specificity.keegan.st/>
<http://www.w3.org/QA/Tips/color>

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

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

Thread

Change font size in multiple classes Andrew Poulos <ap_prog@hotmail.com> - 2015-09-03 13:55 +1000
  Re: Change font size in multiple classes "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-09-03 10:09 +0200
  Re: Change font size in multiple classes "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-09-03 10:51 +0200
    Re: Change font size in multiple classes Andrew Poulos <ap_prog@hotmail.com> - 2015-09-03 20:39 +1000
      Re: Change font size in multiple classes Jake Jarvis <pig_in_shoes@yahoo.com> - 2015-09-03 16:20 +0200
        Re: Change font size in multiple classes "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-09-03 16:27 +0200
          Re: Change font size in multiple classes Jake Jarvis <pig_in_shoes@yahoo.com> - 2015-09-03 16:30 +0200
            Re: Change font size in multiple classes "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-09-03 16:39 +0200
              Re: Change font size in multiple classes Andrew Poulos <ap_prog@hotmail.com> - 2015-09-04 15:49 +1000
                Re: Change font size in multiple classes "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-09-04 09:37 +0200
                Re: Change font size in multiple classes Andrew Poulos <ap_prog@hotmail.com> - 2015-09-04 18:11 +1000
                Re: Change font size in multiple classes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-09-07 03:33 +0200
      Re: Change font size in multiple classes "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-09-03 16:24 +0200
  Re: Change font size in multiple classes Dr J R Stockton <reply1500@merlyn.demon.co.uk.invalid> - 2015-09-05 20:49 +0100
    Re: Change font size in multiple classes Andrew Poulos <ap_prog@hotmail.com> - 2015-09-06 19:30 +1000
      Re: Change font size in multiple classes Dr J R Stockton <reply1500@merlyn.demon.co.uk.invalid> - 2015-09-07 20:27 +0100
  Re: Change font size in multiple classes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-09-06 14:07 +0200
    Re: Change font size in multiple classes Andrew Poulos <ap_prog@hotmail.com> - 2015-09-07 09:53 +1000
      Re: Change font size in multiple classes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-09-07 20:35 +0200
        Re: Change font size in multiple classes Andrew Poulos <ap_prog@hotmail.com> - 2015-09-08 14:18 +1000
          Re: Change font size in multiple classes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-09-09 04:51 +0200

csiph-web