How to change the css of the div that i just created in code

Question

I have the code just below, I don't even know if it works but I just wanted to learn how to change the css properties of the div that I just created within my JQuery structure. Like changing it's width, color and stuff.

<script>
    jQuery(document).ready(function () {
        jQuery("#button").click(function () {
            jQuery("#button").html('Click me again');
            jQuery("#button").addClass("button1");
        });

        jQuery(".button1").click(function () {
            jQuery(".button1").hide();
            jQuery('<div />')
            .addClass('buttondiv')
            .css({
                'width': '150px',
                'height': '150px',
                'background-color': 'red'
            })
            .html(text)
            .appendTo("#maindiv");
        });
    });
</script>

Any help will be appreciated.

Tushar · Accepted Answer · 2015-07-07 08:31:54Z

1

Use css() to add styles to the element.

See the comments inline in the code:

jQuery('<div />') // Create new div element
    .addClass('buttondiv') // Add new class
    .css({ // Add inline styles
        'background-color': 'red',
        'color': 'green'
    })
    .html(text)
    .appendTo("#maindiv"); // No need of `jQuery()` here

answered Jul 7, 2015 at 8:31

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Altay Mazlum Over a year ago

One more thing... The button that I've added a class does not work after the second click, any thoughts why?

Tushar Over a year ago

@AltayMazlum You need to use event delegation

Tushar Over a year ago

@AltayMazlum $(document).on('click', '.buttondiv', function() { ... }); Use this

Altay Mazlum Over a year ago

I did but this time, the button gets hidden even in the first click.

Tushar Over a year ago

Let us continue this discussion in chat.

Muhammet · Accepted Answer · 2015-07-07 08:32:16Z

1

http://api.jquery.com/css/

For a single property you can use:

$("#button").css("background-color","yellow");

For multiple style properties:

$("#button").css({"background-color":"yellow", "width":"50px"});

answered Jul 7, 2015 at 8:32

Muhammet

3,31816 silver badges23 bronze badges

Comments

marc_s · Accepted Answer · 2016-06-07 20:39:09Z

-1

You can use the jQuery css method in which you can set the css property as following

$(selector).css('width',100);

$(selector).css('color',red);

For more info read the css method of jQuery click here

edited Jun 7, 2016 at 20:39

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jul 7, 2015 at 8:36

dom

1,1061 gold badge11 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to change the css of the div that i just created in code

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related