How can I insert CSS code on direct child with Jquery?

Question

I have CSS code like this.

.dl-container > .dl-submenu.dl-animate-out-2 { <<< My target

    Some code that I want to insert.

}

And this my Jquery code.

$( ***My target*** ).css("top", "500px" );

How Jquery insert top:500px; at my target CSS when I click some element on my website.

You cannot replace your css file. You can only do this for the page with jquery on any element. — Rohit Arora
– Rohit Arora, Commented Jul 22, 2015 at 11:19
You can only update inline css with $(elementSelector).css("top", "500px"); and you can't edit style on css file. — Hitendra
– Hitendra, Commented Jul 22, 2015 at 11:21

Alexis B. · Accepted Answer · 2015-07-22 11:33:54Z

1

An other solution instead of the $(".myelement").css("top", "500px" ); could be to add a class.

.dl-container > .dl-submenu.dl-animate-out-2 {
   /* Base CSS */
   top: auto;
}
.dl-container > .dl-submenu.dl-animate-out-2.newClass {
   /* Some new CSS */
   top: 500px;
}

then

$(".dl-container > .dl-submenu.dl-animate-out-2").addClass('newClass');

answered Jul 22, 2015 at 11:33

Alexis B.

1,1078 silver badges14 bronze badges

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

Comments

vanntile · Accepted Answer · 2015-07-22 11:25:17Z

0

This is a working example of manipulating the css of the element .stupid.

$(document).ready(function(){
    $(".stupid").click(function(){
        $(".stupid").css("color", "red" );
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stupid">Some stupid text</div>

You have to use

$(".myelement").css("top", "500px" );

If it works, accept it.

answered Jul 22, 2015 at 11:25

vanntile

2,7974 gold badges28 silver badges48 bronze badges

3 Comments

Sarin Amonratmongkol Over a year ago

Can I replace ".dl-container > .dl-submenu.dl-animate-out-2" on ".myelement"?

vanntile Over a year ago

I think you do not understand how jQuery works. That's ok, we are here to help. First thing to do is to find the desired element in your html code and add it a class called, let's say ".stupid". Then you add the jquery code to the page. You can't modify a css directly.

Sarin Amonratmongkol Over a year ago

Thank you.I will try it.

Collectives™ on Stack Overflow

How can I insert CSS code on direct child with Jquery?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related