0

Currently I am doing something like this:

function newFont(newSizeA, newSizeB) {

    var elem =  document.getElementById('style-1');

    if (typeof(elem) != 'undefined' && elem != null) {
        removeChildNodes(elem); // function that removes child 
        nodesremoveNode(elem);
    }

    var styleText = ".a { font-size:" + newSizeA + "px; } .b { font-size:" + newSizeB + "px; }";
    var x = document.createElement('style');

    x.setAttribute("type", "text/css");
    x.setAttribute("id", "style-1");

    if (x.styleSheet) { // for IE
        x.styleSheet.cssText = styleText;
    } 
    else { // others
        var textnode = document.createTextNode(styleText);
        x.appendChild(textnode);
    }
}

The point of it is that there is a loop happening and another function is measuring the size of a menu to make sure it fits in a spot when someone is changing the font size.

I am wondering, is there a better way to create and manipulate elements? I need to change padding and font size but right now as you can see I'm just removing it entirely and recreating it.

Tasos K.
  • 7,979
  • 7
  • 39
  • 63
RON2015
  • 443
  • 3
  • 16
  • What your code does is to change every time the declaration of `.a` and `.b` classes with every call, right? The new values are specific or they are arbitrary every time? – Tasos K. Apr 25 '15 at 21:27
  • there is a range of font sizes and paddings, it will try each font size with each padding until it finds one that fits... but yes it changes them in the class declaration then measures the elements – RON2015 Apr 25 '15 at 21:31
  • The range contains about 5 different font-sizes or 50? I am thinking that it would be easier to implement all classes and use them instead, so if they are few it is something that can be done – Tasos K. Apr 25 '15 at 21:36
  • approximately 30 font sizes, but the padding range is 100... so for font-size 30, it checks padding 6 - 100 – RON2015 Apr 25 '15 at 21:39
  • that would be about 3000 classes.. wouldnt it? – RON2015 Apr 25 '15 at 21:42
  • No, it would be about 130, but still it is a lot! The only thing I can think of is to simply set the style and use the classes as a selector. See here: http://jsfiddle.net/ovrbhz8L/. If it is helpful, I could post it as an answer – Tasos K. Apr 25 '15 at 21:46
  • i think its more than 130, because it goes, font-size:30px; padding:100px; / font-size:30px; padding:99px; / font-size:30px; padding:98px; / ... / ... / font-size:29px; padding:100px; / font-size:29px; padding:99px; / ... – RON2015 Apr 25 '15 at 21:51
  • My thought is to create 30 classes only for font-size and 100 classes only for padding. Then you can combine from those. Yes, you can get about 3000 combinations – Tasos K. Apr 25 '15 at 21:53
  • i see, that makes sense. the jsfiddle you did is a different idea as well that might work! thank you my friend – RON2015 Apr 25 '15 at 21:54
  • Yes, because otherwise you would need to write too many classes – Tasos K. Apr 25 '15 at 21:54

1 Answers1

0

I think the easiest way is to prepare several css-styles for different font-sizes and then attach them as so:

function newFont(targetElement, fontSize) {
    document.getElementById(targetElement).className = fontSize;
}


newFont('myElement','bigFont');

the css-style would then be:

.bigFont {
    font-size: 5em;
}

if you want to add the style do:

 document.getElementById("MyElement").className += "MyClass";

if you want to remove styles or check if the style is already apllied please refer to this perfect answer: Change an element's class with JavaScript

Community
  • 1
  • 1
Jeff
  • 6,895
  • 1
  • 15
  • 33