Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript jQuery variables in CSS

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #30689
    mshort1985
    Member

    Hi everyone, I was wondering if it was possible for me to use variables in CSS using jQuery

    for example instead of having something like this

    $(‘body’).css(‘background’, ‘rgb(0,0,0)’);

    to have something like..

    rednumber = 0;
    greennumber = 0;
    bluenumber = 0;

    $(‘body’).css(‘background’, ‘rgb(rednumber,greennumber,bluenumber)’);

    #75852
    TT_Mark
    Member

    Have you tried it? Something like that should work, yes

    #75823
    Chris Coyier
    Keymaster

    1) remember to use var declarations to avoid them becoming global.

    var rednumber = 0,
    greennumber= 0,
    bluenumber = 0;

    2) Syntax would be:

    $('body').css('background', 'rgb(' + rednumber + ',' + greennumber + ',' + bluenumber + ')');
    
    

    #75824
    mshort1985
    Member

    thanks both of you, I had tried it, but my syntax wasn’t quite the same as what Chris Suggested. :)

    #173230
    eddysapata
    Participant

    what if i want to put variable in place of property name..
    i tried that “+variable+” but it is not working… :( :( :(

    #173232
    Paulie_D
    Member

    Wow..way to resurrect a 4 year old thread.

    If you show us what you have tried (perhaps in Codepen.io) we can loko at the actual code?

    #173235
    eddysapata
    Participant

    See the actual scenario is that i want a js function which takes a side as a input and act accordingly i mean it can draw a triangle..

    Check it here..

    so i observed carfully the four triangle and i came to some conclusion.

    • In triangle up top border is not being used.
    • In triangle down bottom border is not used.

    and the same thing goes on with left and right .

    so now the point is if want a triangle which has base at bottom and top as upward then we must send a side top to the function so that it acts accordinly.

    but as far my conclusion is concerned the side which we got as an argument is not used in the making of triangle so what i did is i took all the side in an array named sides

    var sides = ["top", "right", "bottom", "left"];     
    

    then i want to delete the side which is passed as an argument suppose someone called a function triangle(“top”) so we have to remove that as it is not used in the function(conclusion). so i used a for look for the same.

    for (i = 0; i < 4; i++) {      //expect is the input i.e argument.
            if (sides[i] == except) {
                delete sides[i];
                sides.splice(i, 1);
            }
        }
    

    The next thing which i want to do is adjust border in a manner so that the top of the triangle get adjusted i mean (see the link) the properties i am talking about….

    so help me in this,. :)

    huh!!! :P

    now my question is

    cant we use this???

    var a ="border-top";
        $('.ram').css({" + a + ": "5px solid red"});
    

    Thanks…. :)
    P.S–> I am beginner in js andwant to learn something thats why i am trying my own logics. So please me if i have mistyped something.. :) :)
    eddy

    #173236
    Paulie_D
    Member

    Why delete the border that isn’t being used when you could just set it to 0?

    Wouldn’t that be easier?

    I confess I’m pretty useless at JS. :)

    #173237
    eddysapata
    Participant

    My whole code .It may contains mistakes or some childish logics but i am in a initial stage i dont know much about javascript..

    `function triangle(side) {
    var except = side;
    var sides = ["top", "right", "bottom", "left"];
    for (i = 0; i &lt; 4; i++) {
        if (sides[i] == except) {
            delete sides[i];
            sides.splice(i, 1);
        }
    }
    for (var i = 0; i &lt; sides.length; i++) {
        console.log(sides[i]);
    };
    function createClass() {
        var style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = '.lohogyakaam';
        document.getElementsByTagName('head')[0].appendChild(style);
        for (var j = 0; j &lt; sides.length; j++) {
        style.innerHTML = '.lohogyakaam';
            style.innerHTML = "\n" + "border"+"-"+ sides[j] + ":" + "Xpx" + ";";
            console.log("----&gt;"+sides[j]);
        }
     }
    `
    
    }
    $(function() {
        var a ="border-top";
        $('.ram').css({" + a + ": "5px solid red"});
    });
    
    triangle("top");
    console.log("========================================");
    triangle("bottom");
    console.log("========================================");
    triangle("right");
    console.log("========================================");
    triangle("left");
    
Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.