[lnkForumImage]
TotalShareware - Download Free Software

Confronta i prezzi di migliaia di prodotti.
Asp Forum
 Home | Login | Register | Search 


 

Forums >

comp.lang.javascript

Change font size in multiple classes

Andrew Poulos

9/3/2015 3:56:00 AM

A 3rd party elearning app that the client is using publishes to HTML.
The client wants me to add a button that will allow the user to
increase/decrease the font size.

When I look at the publish source I note that every piece of text is
wrapped in a SPAN which has a class attribute.

Within the HTML there's a STYLE element with a selector for every SPAN
which typical look like

span.text45Font1 {
font-size:13px;
font-family:"Arial", sans-serif; color:#010101;
}

where the selector is, I think, always of the form
"span.text" + number + "Font" + number

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?

Andrew Poulos
21 Answers

ram

9/3/2015 5:26:00 AM

0

Andrew Poulos <ap_prog@hotmail.com> writes:
>Is one way "better" than the other or is there another way to do this?

Maybe you can use a JavaScript element right behind the
style element to convert all the px values into em values
(only once, when the page is loaded). When no contents has
been displayed yet, this should be faster than when it is
done later.

It is possible that then in some browsers, a single change of

document.body.style.fontsize

will affect all other font sizes of sub elements. (Not tested.)

Evertjan.

9/3/2015 8:10:00 AM

0

ram@zedat.fu-berlin.de (Stefan Ram) wrote on 03 Sep 2015 in
comp.lang.javascript:

> document.body.style.fontsize

document.body.style.fontSize

the - translates to a capital letter.

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

Evertjan.

9/3/2015 8:52:00 AM

0

ram@zedat.fu-berlin.de (Stefan Ram) wrote on 03 Sep 2015 in
comp.lang.javascript:

> Andrew Poulos <ap_prog@hotmail.com> writes:
>>Is one way "better" than the other or is there another way to do this?
>
> Maybe you can use a JavaScript element right behind the
> style element to convert all the px values into em values
> (only once, when the page is loaded). When no contents has
> been displayed yet, this should be faster than when it is
> done later.

Works fine, start with:

body {font-size:62.5%;} // <http://pxtoe...

and

temp = document.getElementsByTagName('*');
for (el in temp)
if (temp[el].style && temp[el].style.fontSize)
temp[el].style.fontSize =
temp[el].style.fontSize.replace(/(\d)px/,'.$1em');

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

Andrew Poulos

9/3/2015 10:39:00 AM

0

On 3/09/2015 6:51 PM, Evertjan. wrote:
> ram@zedat.fu-berlin.de (Stefan Ram) wrote on 03 Sep 2015 in
> comp.lang.javascript:
>
>> Andrew Poulos <ap_prog@hotmail.com> writes:
>>> Is one way "better" than the other or is there another way to do this?
>>
>> Maybe you can use a JavaScript element right behind the
>> style element to convert all the px values into em values
>> (only once, when the page is loaded). When no contents has
>> been displayed yet, this should be faster than when it is
>> done later.
>
> Works fine, start with:
>
> body {font-size:62.5%;} // <http://pxtoe...
>
> and
>
> temp = document.getElementsByTagName('*');
> for (el in temp)
> if (temp[el].style && temp[el].style.fontSize)
> temp[el].style.fontSize =
> temp[el].style.fontSize.replace(/(\d)px/,'.$1em');
>

I'm having a little trouble getting it to work (but thanks for the way
forward). So far I've changed
temp = document.getElementsByTagName('*');
to
temp = document.body.getElementsByTagName('*');

Andrew Poulos

Jake Jarvis

9/3/2015 2:20:00 PM

0

Am 03.09.2015 um 12:39 schrieb Andrew Poulos:
> On 3/09/2015 6:51 PM, Evertjan. wrote:
>> ram@zedat.fu-berlin.de (Stefan Ram) wrote on 03 Sep 2015 in
>> comp.lang.javascript:
>>
>>> Andrew Poulos <ap_prog@hotmail.com> writes:
>>>> Is one way "better" than the other or is there another way to do this?
>>>
>>> Maybe you can use a JavaScript element right behind the
>>> style element to convert all the px values into em values
>>> (only once, when the page is loaded). When no contents has
>>> been displayed yet, this should be faster than when it is
>>> done later.
>>
>> Works fine, start with:
>>
>> body {font-size:62.5%;} // <http://pxtoe...
>>
>> and
>>
>> temp = document.getElementsByTagName('*');
>> for (el in temp)
>> if (temp[el].style && temp[el].style.fontSize)
>> temp[el].style.fontSize =
>> temp[el].style.fontSize.replace(/(\d)px/,'.$1em');
>>
>
> I'm having a little trouble getting it to work (but thanks for the way
> forward). So far I've changed
> temp = document.getElementsByTagName('*');
> to
> temp = document.body.getElementsByTagName('*');
>

That style property reflects *inline* styles.



Take a look at the _DOM Level 2 Style Specification_ (and MSDN for
compatibility, they used to have a different API).

// modify that one
var style = document.styleSheets[x].cssRules[y].style;

Evertjan.

9/3/2015 2:24:00 PM

0

Andrew Poulos <ap_prog@hotmail.com> wrote on 03 Sep 2015 in
comp.lang.javascript:

> On 3/09/2015 6:51 PM, Evertjan. wrote:
>> ram@zedat.fu-berlin.de (Stefan Ram) wrote on 03 Sep 2015 in
>> comp.lang.javascript:
>>
>>> Andrew Poulos <ap_prog@hotmail.com> writes:
>>>> Is one way "better" than the other or is there another way to do this?
>>>
>>> Maybe you can use a JavaScript element right behind the
>>> style element to convert all the px values into em values
>>> (only once, when the page is loaded). When no contents has
>>> been displayed yet, this should be faster than when it is
>>> done later.
>>
>> Works fine, start with:
>>
>> body {font-size:62.5%;} // <http://pxtoe...
>>
>> and
>>
>> temp = document.getElementsByTagName('*');
>> for (el in temp)
>> if (temp[el].style && temp[el].style.fontSize)
>> temp[el].style.fontSize =
>> temp[el].style.fontSize.replace(/(\d)px/,'.$1em');
>>
>
> I'm having a little trouble getting it to work (but thanks for the way
> forward).

What seems to be the trouble?

I only tested on Chrome, but should be working on all modern browsers.

Do not try to dynamicly change the 62.5% until the above is working,
and changing that same 62.5% does as expected other than by debugging with
F12 and the up and down keys.

> So far I've changed
> temp = document.getElementsByTagName('*');
> to
> temp = document.body.getElementsByTagName('*');

Why?

Do you have tags having a style
[and if so then also having a fontsize]
outside the body?

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

Evertjan.

9/3/2015 2:28:00 PM

0

Jake Jarvis <pig_in_shoes@yahoo.com> wrote on 03 Sep 2015 in
comp.lang.javascript:


>> temp = document.getElementsByTagName('*');

[etc]

> That style property reflects *inline* styles.

Yes, because that was the OQ asked by the OP.

> Take a look at the _DOM Level 2 Style Specification_ (and MSDN for
> compatibility, they used to have a different API).

Perhaps first get my method working and understood?

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

Jake Jarvis

9/3/2015 2:31:00 PM

0

Am 03.09.2015 um 16:27 schrieb Evertjan.:
> Jake Jarvis <pig_in_shoes@yahoo.com> wrote on 03 Sep 2015 in
> comp.lang.javascript:
>
>
>>> temp = document.getElementsByTagName('*');
>
> [etc]
>
>> That style property reflects *inline* styles.
>
> Yes, because that was the OQ asked by the OP.
>

What?
No ...

>> Take a look at the _DOM Level 2 Style Specification_ (and MSDN for
>> compatibility, they used to have a different API).
>
> Perhaps first get my method working and understood?
>

Evertjan.

9/3/2015 2:40:00 PM

0

Jake Jarvis <pig_in_shoes@yahoo.com> wrote on 03 Sep 2015 in
comp.lang.javascript:

>>> That style property reflects *inline* styles.
>>
>> Yes, because that was the OQ asked by the OP.
>>
>
> What?
> No ...

Indeed, Andrew said 'class attribute', my mistake:

Andrew Poulos <ap_prog@hotmail.com> wrote on 03 Sep 2015 in
comp.lang.javascript:
> When I look at the publish source I note that every piece of text is
> wrapped in a SPAN which has a class attribute.

However, whether you change only the inline styles or also the
classes and id styles, you would have to assertain that you are only
changing text, not images and other element-sizes. Otherwise zooming would
do just fine.

So perhaps keeeping to the <span> elements would be safest for now ;-)

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

Andrew Poulos

9/4/2015 5:50:00 AM

0

On 4/09/2015 12:39 AM, Evertjan. wrote:
> Jake Jarvis <pig_in_shoes@yahoo.com> wrote on 03 Sep 2015 in
> comp.lang.javascript:
>
>>>> That style property reflects *inline* styles.
>>>
>>> Yes, because that was the OQ asked by the OP.
>>>
>>
>> What?
>> No ...
>
> Indeed, Andrew said 'class attribute', my mistake:
>
> Andrew Poulos <ap_prog@hotmail.com> wrote on 03 Sep 2015 in
> comp.lang.javascript:
>> When I look at the publish source I note that every piece of text is
>> wrapped in a SPAN which has a class attribute.
>
> However, whether you change only the inline styles or also the
> classes and id styles, you would have to assertain that you are only
> changing text, not images and other element-sizes. Otherwise zooming would
> do just fine.
>
> So perhaps keeping to the <span> elements would be safest for now ;-)

I'm now trying this and it seems to be ok (not working in IE 8):


var i,
j,
len,
rules;

for (j = 0; j < document.styleSheets.length; j++) {
rules = document.styleSheets[j].cssRules;
len = rules.length;

for (i = 0; i < len; i++) {
if ( /font-size/.test(rules[i].cssText) ) {
rules[i].style.fontSize =
(parseInt(rules[i].style.fontSize, 10) / 16) + "em";
}
}
}

document.body.style.fontSize = "100%";


I search for font-size rules and then convert any to EMs based on 16
pixels equals 1 em (the app only ever publishes font sizes in pixels).

Andrew Poulos